いつもお世話になっております。
以下のコードの通り、ファイルアップロードできる個数は2個までで、条件を満たすと
input type="file"のプロパティにdisabledが付されるように設計しております。
また、アップロードしたファイルを削除して再度投稿できるようにdeleteボタンを用意し、
disabledを解除させております。
ここで問題が生じているのですが、削除後にファイルをアップロードさせようとしても
サムネイル<span>が表示されません。
console.log(files);
この時点でlogが表示されないので読み込まれてもいないものと思われます。
cloneで動的に生成された要素なのでイベントが生じないのでしょうか。
原因と解決法がわからなかったため相談させてくただい。
よろしくお願い申し上げます。
HTML
1<div class="fileUpload"> 2 3<div id="drop_zone"> 4<p style="font-size: 12px;">ここにファイルをドロップ</p> 5<p style="font-size: 10px;">または</p> 6<label for="files" class="fileupImg"><i class="plus icon"></i>ファイルを選択 7<input type="file" id="files" style="display: none" value="2097152" name="file" multiple /> 8</label> 9</div> 10<figure> 11<output id="list"></output> 12</figure> 13<div class="fileInfo"></div> 14 15</div> 16 17<button type="button" name="button" id="delete" style="border-style: none;">delete</button> 18<script> 19function handleFileSelect(evt) { 20var files = evt.target.files; // FileList object 21console.log(files);//この時点で認識されない! 22 23for (var i = 0, f; f = files[i]; i++) { 24if (!f.type.match('image.*')) { 25continue; 26} 27var reader = new FileReader(); 28// Closure to capture the file information. 29reader.onload = (function(theFile) { 30return function(e) { 31 32// Render thumbnail. 33var span = document.createElement('span'); 34span.innerHTML = ['<img class="thumbnail" src="', e.target.result, 35'" title="', escape(theFile.name), '"/>'].join(''); 36document.getElementById('list').insertBefore(span, null); 37}; 38})(f); 39// Read in the image file as a data URL. 40reader.readAsDataURL(f); 41}//ここまでがaddEventListnerの第二引数に入れるべき関数 42} 43document.getElementById('files').addEventListener('change', handleFileSelect, false); 44 45function handleDragOver(evt) { 46evt.stopPropagation(); 47evt.preventDefault(); 48evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 49} 50var dropZone = document.getElementById('drop_zone'); 51dropZone.addEventListener('dragover', handleDragOver, false); 52dropZone.addEventListener('drop', handleFileSelect, false); 53 54dropZone.ondrop = function(e) { 55e.preventDefault(); 56this.className = 'dropzone'; 57// console.log(e.dataTransfer.files); 58var fileInput = document.getElementById('files'); //fileのinputタグ取得 59var file = e.dataTransfer.files; //アップロード対象ファイル情報取得 60fileInput.files = file; //fileのinputタグへセット 61}; 62 63</script> 64 65<script type="text/javascript"> 66var element=document.getElementById('files'); 67var file_length = 0; 68$(function(){ 69$('#files').on('change',function(){ 70file_length+=element.files.length; 71console.log(file_length); 72if (file_length>=2) { 73$('#files').prop('disabled','true'); 74} 75 76}) 77}); 78 79$(function(){ 80$('#delete').on('click',function(){ 81$('#files').replaceWith($('#files').clone()); 82$('#list').find('span').remove(); 83var file_length = 0; 84$('#files').removeAttr('disabled'); 85}) 86}) 87</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。