将丢弃的文件附加到<input type ="file"multiple>

Bre*_*818 6 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;
};  
Run Code Online (Sandbox Code Playgroud)

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

Sam*_*iew 7

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


编辑:

从 2017 年开始,您可以将拖放的文件设置为文件输入。请参阅将文件拖放到页面时如何设置文件输入值?