将丢弃的文件追加到<input type =“file”multiple =“”/>

时间:2013-03-04 04:03:10

标签: javascript html5 file-upload filereader

我不确定这是否可行,我正在用jQuery编写自己的文件上传插件,效果很好,但我想做的是通过允许用户删除文件来增强用户体验从他们的桌面到div并将该文件附加到我的输入

我有拖放功能,与上传相同,但目前拖放功能与上传多个功能分开。

所以在我的html5 drop函数中,我想做类似的事情:

<div id="dropZone"></div>
<!--Drop area is seperate from the fileUpload below-->
<form enctype="multipart/form-data">
    <input class="clear" name="nonImagefilesToUpload[]"  id="nonImagefilesToUpload" type="file" multiple/>
</form>

this.drop = function(e){
    e.stopPropagation();
    e.preventDefault();
    files = e.dataTransfer.files ; 
    for (var i = 0, file; file = files[i]; i++) {

        //pseudo code
        if ( !file.type.match(settings.imageTypeMatch )) {
            //not an image so I want to append it to my files array
            $('#nonImagefilesToUpload').append( file[i] );
            //hoping this will also trigger my input change


        }else{
            var reader = new FileReader();
            reader.onload = (function(aFile) {
            return function(evt) {
                if (evt.target.readyState == FileReader.DONE) 
                {
                    //code to handle my images
                    //which are uploaded seperate via xhr
                }   
            })(file);//done reading the file

            //read the file
            reader.readAsDataURL(file);
        }
    }


    return false;
};  

如果有人可以帮忙解决这个问题,那么由于证券可能无法实现,但我想我会问

1 个答案:

答案 0 :(得分:2)

你是对的。您无法更改file输入字段的值。

请参阅Dynamically set value of a file input