javascript - 使用javascript删除上传的文件

Question

我在一个房屋租赁网站上工作，在“提交属性”页面中，我有一个输入文件(多个)来上传房屋图像，输出显示所选图像。

我的代码:

添加.ctp

<label>Images</label>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

上传.js

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb"  src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list').insertBefore(span, null);

            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

我想要的是在输出中添加一个按钮，以便在我想更改所选图像时将其删除。

然后在编辑页面中，从文件夹中加载所选图像并根据需要删除它们。

Answer 1

我觉得你被误解了。我相信您想在上传文件之前从文件上传控件中删除文件，就像拥有一个可视化编辑器来查看当前文件上传控件中的文件一样。如果是这样，请继续阅读:

您无法编辑它们，您只能完全清除文件队列。 - 这是read only .

但是，您可以将这些项目插入一个单独的数组并对其应用任何更改，然后继续手动上传它们。 JQuery 会促进这里的过程。

阅读更多相关信息 here .