使用javascript删除上传的文件

Remove uploaded files using javascript

本文关键字：文件 javascript 删除 使用      更新时间：2023-09-26

我在一个房屋租赁网站上工作，在"提交房产"页面中，我有一个输入文件（多个）来上传房屋图像，并输出显示所选图像。

我的代码：

添加.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);

我想要的是在输出中添加一个按钮，如果我想更改所选图像，可以删除它们。

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

我想你被误解了。我相信你想在上传文件之前从文件上传控件中删除文件，就像有一个可视化编辑器来显示文件上传控件当前包含的文件一样。如果是这样的话，请继续阅读：

您不能编辑它们，只能完全清除文件队列-只读。

然而，您可以做的是将这些项目推送到一个单独的数组中，并对其应用任何更改，然后继续手动上传。JQuery将为这里的过程提供便利。

点击此处了解更多信息。

相关文章：