带有预览和删除选项的图像上载-Javascript/Jquery

下面的代码运行良好，可以上传多个图像

这是html和jQuery代码：

<div class="field" align="left">
            <span>
                <h3>Upload your images</h3>
                <input type="file" id="files" name="files[]" multiple />
            </span>
        </div>

上传你的图片

脚本如下：

<style>
    input[type="file"] {

     display:block;
    }
    .imageThumb {
     max-height: 75px;
     border: 2px solid;
     margin: 10px 10px 0 0;
     padding: 1px;
     }
    </style>
    <script type="text/javascript">
    $(document).ready(function() {

     if(window.File && window.FileList && window.FileReader) {
        $("#files").on("change",function(e) {
            var files = e.target.files ,
            filesLength = files.length ;
            for (var i = 0; i < filesLength ; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $("<img></img>",{
                        class : "imageThumb",
                        src : e.target.result,
                        title : file.name
                    }).insertAfter("#files");
               });
               fileReader.readAsDataURL(f);
           }
      });
     } else { alert("Your browser doesn't support to File API") }
    });

    </script>

输入[type=“file”]{
显示：块；
}
.imageThumb{
最大高度：75px；
边框：2倍实心；
利润率：10px 10px 0；
填充：1px；
}
$（文档）.ready（函数（）{
if（window.File&&window.FileList&&window.FileReader）{
$（“#文件”）。关于（“更改”，函数（e）{
var files=e.target.files，
filesLength=files.length；
对于（var i=0；i

代码添加了多个图像并显示了图像的预览。但是现在我想当用户点击某个按钮时，比如说删除上传的每个图像，它应该被删除。而不是隐藏

---

如果您对此有任何帮助，我们将不胜感激。

请尝试添加以下内容：

。单击（function（）{$（this）.remove（）；}）；

。它将通过单击图像来删除图像

编辑包括改进版

编辑2由于人们不断询问，请参见关于从文件列表手动删除文件的说明（扰流板：不可能…）

$（文档）.ready（函数（）{
if（window.File&&window.FileList&&window.FileReader）{
$（“#文件”）。关于（“更改”，函数（e）{
var files=e.target.files，
filesLength=files.length；
对于（var i=0；i删除图像”+
）.insertAfter（“#文件”）；
$（“.remove”）。单击（函数（）{
$（this.parent（“.pip”）.remove（）；
});
//这里是旧代码
/*$("
input[type=“file”]{
显示：块；
}
.imageThumb{
最大高度：75px；
边框：2倍实心；
填充：1px；
光标：指针；
}
皮普先生{
显示：内联块；
利润率：10px 10px 0；
}
.移除{
显示：块；
背景：#444；
边框：1px纯黑；
颜色：白色；
文本对齐：居中；
光标：指针；
}
。移除：悬停{
背景：白色；
颜色：黑色；
}

上传你的图片
用于删除文件值和文件预览

$(".remove").click(function(){
        $(this).parent(".pip").remove();
        $('#files').val("");
      });`

我建议你试试这个。试试这个jquery插件：非常感谢你……它很有魅力……它解决了我的问题……再次感谢你……当我提交时……它只显示了一个文件……甚至我上传了多个…@pinkturtle你在用什么服务器端语言？如果PHP尝试编写
var\u dump（$\u POST[“files”]）
或
var\u dump（$\u获取[“文件”]）
检查您的var内容。这将只删除图像预览，而不是选定的图像！@PinkTurtle是否有人可以共享预览和删除图像的完整代码，而不仅仅是隐藏图像，而是删除？这将删除所有文件，而不仅仅是您试图删除的文件！上述代码将删除所有选定的文件或图像。不起作用。我们该如何删除这些文件是否从输入文件中删除文件？