Имена файлов должны отображаться под формой предварительного просмотра изображения

Question

У меня есть следующий сценарий предварительного просмотра изображения, с которым я сейчас работаю, который я нашел в Интернете, который отлично работает в созданной мной форме. Однако я хотел бы изменить сценарий следующим образом (попытки были, но безуспешны)

1. Я хотел бы иметь возможность отображать имя файла (ов). В настоящее время я могу получить имя одного файла. Однако при загрузке нескольких изображений последнее имя изображения используется для всех загруженных изображений.

2. Я хотел бы добавить кнопку «Удалить все изображения», когда пользователь загружает в форму более одного изображения.

Будем очень благодарны любой помощи.

/*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.");
    }*/
});
/***********************/

jquery

0

Roberto Flores 14 Мар 2018 в 00:52

Answer 1

Вот еще одно решение, которое использует 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);

  }
});

1

Matthew Moran 13 Мар 2018 в 23:15

Answer 2

Добавление имени файла в объект 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>

2

Farhan 13 Мар 2018 в 23:05

Имена файлов должны отображаться под формой предварительного просмотра изображения

2 ответа

Похожие вопросы

Новые вопросы

jquery