Question

我有以下图像预览脚本，我目前正在使用我在网上找到的，它在我创建的表单中工作正常。但是，我想在下面修改脚本（已经尝试但没有成功）

1.我希望能够显示要显示的文件的名称。目前，我可以获取一个文件的名称。但是，上传多个图像时，最后一个图像名称将用于上传的所有图像。

2.我希望能够添加一个＆＃34;删除所有图像＆＃34;当用户将多个图像上传到表单时按钮。

非常感谢任何协助。

/*Upload Image and Preview in form*/
$(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;
                    $("<div class=\"pip\">" +
                    "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + 
                    "<br />" + "<span class=\"fontImage\">" + f.name + "</span><br/><span class=\"remove\">x</span>" + "</div>").insertAfter("#files");
                    $(".remove").on('click', function(){
                        $(this).parent(".pip").remove();
                        $('#files').val('');
                    });
                });

                /*if (filesLength > 1){
                    fileReader.onload = (function(e) {
                    $( "<div class=\"pip\">" + "<span class=\"removeAll\">" + "Remove All Images</span></div></div>");
                        $(".removeAll").on('click', function(){
                            $(this).parent(".pip").remove();
                            $('#files').val('');
                        });
                    });
                }*/
                fileReader.readAsDataURL(f);
            }
            /*if(filesLength > 1){
                fileReader.onload = (function(e) {
                    $( "<div class=\"pip\">" + "<span class=\"removeAll\">" + "Remove All Images</span></div></div>").insertAfter("#files");
                    $(".removeAll").on('click', function(){
                            $(this).parent(".pip").remove();
                            $('#files').val('');
                        });
                });
            filesLength--;
            }*/
        });
    } 
    /*else {
        //alert("Your browser doesn't support to File API.");
    }*/
});
/***********************/

Answer 1

将文件名添加到FileReader对象将为您提供目标文件名，希望这对您有所帮助。当有多个图像并分别隐藏时，也会出现删除按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input type="file" id="files" multiple="multiple" style="width:100px;height:100px;background:#ccc;" />
<input type="button" value="Delete All" id="delete_all" style="display:none;"/>
<script type="text/javascript">
$(document).ready(function() {
    $("#delete_all").click(function(){
        $(".pip").remove();
        $("#delete_all").hide();
    });
    $(document).on("click", ".remove", function(){
        if($(".pip").length > 1)
            $("#delete_all").show();
        else
            $("#delete_all").hide();
    });
    if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function(a) {
            var files = a.target.files,
            filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.fileName = files[i].name;
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $("<div class=\"pip\">" +
                    "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + 
                    "<br />" + "<span class=\"fontImage\">" + file.fileName + "</span><br/><span class=\"remove\">x</span>" + "</div>").insertAfter("#files");
                    $(".remove").on('click', function(){
                        $(this).parent(".pip").remove();
                        $('#files').val('');
                    });
                    if($(".pip").length > 1)
                        $("#delete_all").show();
                    else
                        $("#delete_all").hide();
                });             
                fileReader.readAsDataURL(f);
            }

       });
    } 
});
</script>

Answer 2

这是另一种利用IIFE（立即调用的函数表达式）的解决方案。通过使用IIFE，您将创建一个新范围，因此，j循环的未来迭代将不会更新for的引用。 FileReader是异步的，您的变量i在FileReader完成之前被覆盖。

$("#files").on("change", function(e) {

  var files = e.target.files,
    filesLength = files.length;
  for (var i = 0; i < filesLength; i++) {

    (function (j) {

      var f = files[j];
      var fileReader = new FileReader();
      fileReader.fileName = files[j].name;
      fileReader.onload = (function(e) {
        var file = e.target;
        $("<div class=\"pip\">" +
          "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
          "<br />" + "<span class=\"fontImage\">" + file.fileName + "</span><br/><span class=\"remove\">x</span>" + "</div>").insertAfter("#files");
        $(".remove").on('click', function(){
          $(this).parent(".pip").remove();
          $('#files').val('');
        });
      });

      fileReader.readAsDataURL(f);

    })(i);

  }
});

文件名称显示在图像预览表单

2 个答案: