如何一個javascript的FileReader對象附加到一個HTML輸入[類型= 「文件」]元素

Question

我有以下的html

<div style="line-height:60px" class="dragzone"> 
     <img width="60px" height="60px" src="" class="image-thumb" style="float: left;" /> 
     <input class="image field" name="test[0][file]" type="file" /> 
     <input type="text" name="test[0][alt]" placeholder="Image Alt text" /> 
     <input type="text" name="test[0][title]" placeholder="Image Title"/> 
    </div>​ 

和以下JavaScript

$.event.props.push("dataTransfer"); 

    var drag_zones = jQuery(".dragzone:not(.bound)"); 

    // for each dragzone 
    jQuery(drag_zones).each(function(index, domEle) { 
    jQuery(this).bind("dragenter dragover", false).bind("drop", function(evt) { 

     // dont do whatever you were going to do 
     evt.stopPropagation(); 
      evt.preventDefault(); 

     // get the preview image 
      var i = jQuery(this).find("img"); 

     // get the input 
     var f = jQuery(this).find('input[type="file"]'); 

      var files = evt.dataTransfer.files; 

      if (files.length > 0) { 

      var file = files[0]; 
      if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { 
        var reader = new FileReader(); 

       reader.onload = function(evt) { 
        // add the image data to the image preview 
        jQuery(i).attr("src", evt.target.result); 
        // I want to attach the file data to the input field (f) here 
        jQuery(f).css("background","red"); 
       }; 
       reader.readAsDataURL(file); 
      } 
      } 

    }); 

    });​ 

從拖動圖像後窗口資源管理器到元素周圍的dragzone我有更新的預覽圖像罰款，我現在想附加這個文件到實際的HTML表單元素，所以它是與一個表單（未顯示）一起發送和輸入從'沒有文件選擇'到路徑名稱。

我周圍搜索，但無法找到我所需要的，我做了上述代碼jsfiddle在這裏。

http://jsfiddle.net/OneManOneLaptop/5D6k2/

Answer 1

從這裏的文件API文檔http://w3.org/TR/FileAPI/#dfn-filelist它看起來像文件清單是一個只讀對象

interface FileList { 
     getter File? item(unsigned long index); 
     readonly attribute unsigned long length; 
    }; 

所以。不可能。