Jquery使用html5从图像预览数组中删除对象

我成功地将预览图像从查看区域中删除，但实际上并没有将其从阵列中删除。我不知道如何删除它，因为它从未被选中，请帮助我

 var count=0;
function handleFileSelect(evt) {
    var $fileUpload = $("input#files[type='file']");
    count=count+parseInt($fileUpload.get(0).files.length);

    if (parseInt($fileUpload.get(0).files.length) > 6 || count>5) {
        alert("You can only upload a maximum of 5 files");
        count=count-parseInt($fileUpload.get(0).files.length);
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();

        reader.onload = (function (theFile) {
            return function (e) {
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

$('#files').change(function(evt){
    handleFileSelect(evt);
});  

$('#list').on('click', '.remove_img_preview',function () {
    $(this).parent('span').remove();
});

var计数=0；
功能手柄文件选择（evt）{
var$fileUpload=$（“输入#文件[type='file']）；
count=count+parseInt（$fileUpload.get（0.files.length））；
if（parseInt（$fileUpload.get（0.files.length）>6 | | count>5）{
警报（“您最多只能上载5个文件”）；
count=count parseInt（$fileUpload.get（0.files.length））；
evt.preventDefault（）；
evt.stopPropagation（）；
返回false；
}
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
$（“#文件”）.change（函数（evt）{
handleFileSelect（evt）；
});  
$（“#列表”）。在（'单击'，'上。删除预览'，函数（）{
$（this.parent（'span'）.remove（）；
});

html

此处已更新

唯一的错误是您没有减少删除文件的计数器

谢谢

 var count=0;
function handleFileSelect(evt) {
    var $fileUpload = $("input#files[type='file']");
    count=count+parseInt($fileUpload.get(0).files.length);

    if (parseInt($fileUpload.get(0).files.length) > 6 || count>5) {
        alert("You can only upload a maximum of 5 files");
        count=count-parseInt($fileUpload.get(0).files.length);
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();

        reader.onload = (function (theFile) {
            return function (e) {
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

$('#files').change(function(evt){
    handleFileSelect(evt);
});  

$('#list').on('click', '.remove_img_preview',function () {
    $(this).parent('span').remove();
    count--;
});

var计数=0；
功能手柄文件选择（evt）{
var$fileUpload=$（“输入#文件[type='file']）；
count=count+parseInt（$fileUpload.get（0.files.length））；
if（parseInt（$fileUpload.get（0.files.length）>6 | | count>5）{
警报（“您最多只能上载5个文件”）；
count=count parseInt（$fileUpload.get（0.files.length））；
evt.preventDefault（）；
evt.stopPropagation（）；
返回false；
}
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
$（“#文件”）.change（函数（evt）{
handleFileSelect（evt）；
});  
$（“#列表”）。在（'单击'，'上。删除预览'，函数（）{
$（this.parent（'span'）.remove（）；
计数--；
});

不错！这适用于preivew，现在，如果我上传4个图像，然后删除2个，在提交时，它会只上传预览中的2个图像吗？为此，您必须在删除按钮上使用javascript的拼接方法从文件数组中删除该文件。这里是参考链接：。您还可以使用alert（JSON.stringify（files））查看文件数组。将此行放在var files=evt.target.files之后；在您的代码中，您可以看到上载的文件列表。谢谢你，请告诉我如何把这两个在代码中，以便它看到文件后，它会删除那些被点击删除的？你能帮我解决这个问题吗？我不知道如何将这些代码添加到可能的副本中

 var count=0;
function handleFileSelect(evt) {
    var $fileUpload = $("input#files[type='file']");
    count=count+parseInt($fileUpload.get(0).files.length);

    if (parseInt($fileUpload.get(0).files.length) > 6 || count>5) {
        alert("You can only upload a maximum of 5 files");
        count=count-parseInt($fileUpload.get(0).files.length);
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();

        reader.onload = (function (theFile) {
            return function (e) {
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

$('#files').change(function(evt){
    handleFileSelect(evt);
});  

$('#list').on('click', '.remove_img_preview',function () {
    $(this).parent('span').remove();
    count--;
});