3

我正在使用 File API 的 Filereader 在上传之前创建各种图像的缩略图。除了每个缩略图之外，还创建了一个“删除”按钮，因此用户可以在上传之前删除不需要的图像。问题是，如果单击删除按钮，该对象将从 DOM 中删除，但是当点击上传时，所有选定的图像都会被上传，即使是之前删除的图像。

我试图找出一种在上传之前删除这些已删除文件的方法，但我似乎无法找到它们的存储位置。

这是我正在使用的脚本：

$(window).load(function(){

var j = 0;

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.className = 'imageMask '+ j +'';
                span.innerHTML = ['<img class="thumb '+ j +'" src="', e.target.result,
                            '" title="', escape(theFile.name), '" /> <span class="deleteBtn" onClick="removeFunc(\'' + j + '\')">x</span>'].join('');
                j += 1;                  

                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);



});

这是我正在使用的删除功能：

function removeFunc(e){
    $('.imageMask.' + e).remove();
}

谢谢你的帮助！

4

0 回答 0