历史遗产

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

历史遗产

就像@adeneo说的那样，

由于安全限制，您无法设置文件输入的值

但在某些浏览器中，您可以将值设置为空字符串以清除该字段在较旧的（IE）浏览器中，您需要完全替换DOM节点

但是有一种方法可以更改输入文件值，而另一种方法是使用FileList的另一个实例但是你没有设置值，而是设置了input.files属性：请参阅jsfiddle demo here

很久以前我filled a bug report问我们是否可以访问构建一个新的FileList 我们在窗口中将它全局化，但我们无法使用它......

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

有人回应说他们正朝着正常的阵列前进。正在进行讨论here以改变它。但在那个领域几乎没有进展......

解决方案

不幸的是你不能改变值并总结表单，而是你需要创建一个自己的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();
}

放入输入文件时填写文件详细信息

1 个答案:

历史遗产

解决方案

代码审核