將文件詳細信息填入輸入文件

Question

我做了一個拖放文件上傳。現在，當一個文件被放入放置區時，它應該將放入的文件的數據填入<input type="file">。怎麼做 ？

HTML ：

<div id='slct'> 
    Select file <input type="file" id="filename" 
       onchange="readURL(this);" /> <input type="button" value="Upload" 
       onclick="sendFile()" /><br> Or 
</div> 
<button id='uploadDrp'>Upload</button> 
<div class="drop"> 
<div id="filedrag">drop file here</div> 
<img src="#" id="prof"> 
</div> 

的JavaScript：

obj.on("dragover", function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     $(this).css("border", "1px solid #00aaff"); 
    }); 
    obj.on("drop", function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     $(this).css("border", "1px solid #00aaff"); 
     $("#slct").hide(); 
     $("#uploadDrp").fadeIn(500); 
     var dt = e.originalEvent.dataTransfer; 
     file01 = dt; 
     var files = dt.files; 
     if (dt.files.length > 0) { 
      if (dt.files && dt.files[0]) { 
       var reader = new FileReader(); 
       reader.onload = function(e) { 
        $('#prof').attr('src', e.target.result).width(200) 
          .height(200); 
        $('#prof').fadeIn(); 
       }; 

       reader.readAsDataURL(dt.files[0]); 
      } 
     } 
    }); 

Answer 1

歷史lession

它就像@adeneo說，

你不能設置一個文件輸入的值，由於安全限制

但在某些瀏覽器，您可以將值設置爲空字符串來清除該字段。
在舊（IE）瀏覽器，您需要更換DOM節點完全

但是有改變輸入文件價值的一種方式，那就是用FileList 另一個實例，但您沒有設置值，而不是你設置input.files性質：見的jsfiddle演示here

我filled a bug report早就問，如果我們能找到進入構造一個新的文件清單
我們globaly有它的窗口，但沒有辦法，我們可以使用它。 ..

var file1 = new File(['foo'], 'foo.txt') 
var file2 = new File(['bar'], 'bar.txt') 
new window.FileList([file1, file2]) // throws Illegal constructor 

有反應是他們正在向正常的數組移動。 它正在討論here來改變它。但有一點要在該領域沒有任何進展......

解決方案

Unfortenly你不能改變的值，並請跟隨形式，相反，你需要創建一個自己的FORMDATA並用ajax 發佈它，那麼你可以重定向到目標網址...

// Make your own FormData 
var fd = new FormData 

// Add all drang'n'drop files 
for (let file of dt.files) 
    fd.append('files', file) 

// Add all input files 
for (let file of input.files) 
    fd.append('files', file) 

// upload it using xhr or the new fetch api 
fetch(targetUrl, {method: 'post', body: fd}).then(redirect) 

代碼審查

if (dt.files.length > 0) { 
    // it's unnecessary to have two if statement that checks the same thing 
    if (dt.files && dt.files[0]) { 
     // Using FileReader is unnecessary and also worse 
     // see this performance test: https://jsfiddle.net/fdzmd4mg/1 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $('#prof').attr('src', e.target.result).width(200).height(200); 
      $('#prof').fadeIn(); 
     }; 

     reader.readAsDataURL(dt.files[0]); 
    } 
} 

什麼，我認爲你應該做的卻是這樣的

if (dt.files && dt.files[0]) { 
    // store the file list somehere to upload them later 
    // window.files = Array.from(dt.files) 
    // window.files = [dt.files[0]] 

    let url = URL.createObjectURL(dt.files[0]) 
    $('#prof').attr('src', url).width(200).height(200); 
    $('#prof').fadeIn(); 
}