一度、アップロードしたファイルについて、サムネイルを表示して、これをユーザーが削除し、
再びアッップロードできるコードをJSで書いております。
removeで削除し、replaceWithで要素を書き換えることができるのですが、改めてfileをアップロードするとサムネイルが表示されなくなってしまいます。
どの点に問題があるか解決ができなかったため質問させていただきます。
宜しくお願い申し上げます。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>XXX</title> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 7 8 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 9<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 10 11 12 13 </head> 14 <body> 15 16 17<section> 18 <form class="" action="Z_confirm.php" method="post" enctype="multipart/form-data"> 19 20 <div class="fileUpload"> 21 <div id="drop_zone"> 22 <p style="font-size: 12px;">ここにファイルをドロップ</p> 23 <p style="font-size: 10px;">または</p> 24 <label for="files" class="fileupImg"><i class="plus icon"></i>ファイルを選択 25 <input type="file" id="files" style="display: none" value="2097152" name="file" multiple /> 26 </label> 27 </div> 28 <figure> 29 <output id="list"></output> 30 </figure> 31 <div class="fileInfo"></div> 32 </div> 33 34 <script> 35function handleFileSelect(evt) { 36var files = evt.target.files; // FileList object 37 38// Loop through the FileList and render image files as thumbnails. 39for (var i = 0, f; f = files[i]; i++) { 40 41// Only process image files. 42if (!f.type.match('image.*')) { 43continue; 44} 45var reader = new FileReader(); 46 47// Closure to capture the file information. 48reader.onload = (function(theFile) { 49return function(e) { 50// Render thumbnail. 51var span = document.createElement('span'); 52span.innerHTML = ['<img class="thumbnail" src="', e.target.result, 53'" title="', escape(theFile.name), '"/>'].join(''); 54document.getElementById('list').insertBefore(span, null); 55}; 56})(f); 57// Read in the image file as a data URL. 58reader.readAsDataURL(f); 59} 60} 61document.getElementById('files').addEventListener('change', handleFileSelect, false); 62</script> 63 64 <script> 65 function handleDragOver(evt) { 66 evt.stopPropagation(); 67 evt.preventDefault(); 68 evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 69 } 70 71 // Setup the dnd listeners. 72 var dropZone = document.getElementById('drop_zone'); 73 dropZone.addEventListener('dragover', handleDragOver, false); 74 dropZone.addEventListener('drop', handleFileSelect, false); 75 76 dropZone.ondrop = function(e) { 77 e.preventDefault(); 78 this.className = 'dropzone'; 79 console.log(e.dataTransfer.files); 80 var fileInput = document.getElementById('files'); //fileのinputタグ取得 81 var file = e.dataTransfer.files; //アップロード対象ファイル情報取得 82 fileInput.files = file; //fileのinputタグへセット 83 }; 84 85 </script> 86<button type="button" name="button" id="delete" style="height:20px;">X</button> 87<input class="submit step-button" type="submit" value="登録する"> 88</form> 89 90</section> 91 92 <script src="assets/js/jquery.min.js"></script> 93 <script type="text/javascript"> 94 $(function(){ 95 $('#sidebar>a').css('color','#555555'); 96 }); 97 </script> 98 99 <script type="text/javascript"> 100 $(function(){ 101 $('#delete').on('click',function(){ 102 $('#files').replaceWith($('#files').clone()); 103 $('#list').find('span').remove(); 104 }) 105 }) 106 </script> 107 108 </body> 109</html> 110 111 112
回答2件
あなたの回答
tips
プレビュー