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

Question

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

我的代码:

add.ctp

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

upload.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 .