Question

我正在尝试允许我网站上的用户上传多张照片，并使用jQuery预览一次更改，但我的问题是第一个文件一次更改预览然后附加一个新文件输入但附加的文件在更改时不会预览一次。

我不知道我一直试图解决的问题，但现在还没有。

＆＃13;

$(function(){
  $(".append_pre_p_v div input[type=file]").on("change",function(){
    var filecount = $(".append_pre_p_v").children("div").length;
      //var idnum = filecount + 1;
      var filereader = new FileReader();
      var img = $(this).siblings("img");
      filereader.onloadend = function(){
        img.attr("src",this.result).css({"width":"150px","height":"150px"});
      };
      filereader.readAsDataURL(this.files[0]);
      $(this).siblings("label").hide();
      var filearray = "<div class='filearray'><img src=' ' ><input type='file' name='file[]' id='file"+idnum+"'> <label for='file"+idnum+"'><img src='mediaimages/francis.jpg' width='150px' height='150px'></label></div>";
      $(".append_pre_p_v").append(filearray);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append_pre_p_v">
  <div class="filearray">
    <img src="" />
    <input type="file" name="file[]" id="f_p_v_up1" />    
    <label for="f_p_v_up1">
      <img src="mediaimages/francis.jpg" width="150px" height="150px" />
    </label> 
  </div>
</div>

＆＃13;

Answer 1

我不知道我是否理解你的问题。当预览图像并且用户添加另一张图像时，前一张图像消失了，对吗？我对您的代码进行了一些更改，以使答案更清晰。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append_pre_p_v">
  <div class="filearray">  
  </div>
  <input type="file" name="file[]" id="f_p_v_up1" />  
</div>
<script>
    $(document).on('ready',()=>{
    $("#f_p_v_up1").on('change',function(){
      var filereader = new FileReader();
      var $img=jQuery.parseHTML("<img src=''>");
      filereader.onload = function(){
          $img[0].src=this.result;
      };
      filereader.readAsDataURL(this.files[0]);
      $(".filearray").append($img);
    });
  });
</script>

我想知道为什么不让用户一次上传多个文件。下面的代码是多输入版本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append_pre_p_v">
    <div class="filearray">  
    </div>
    <input type="file" name="file[]" id="f_p_v_up1" multiple />  
</div>


<script>
$(document).on('ready',()=>{
    $("#f_p_v_up1").on('change',function(){

        $(".filearray").empty();//you can remove this code if you want previous user input
        for(let i=0;i<this.files.length;++i){
            let filereader = new FileReader();
            let $img=jQuery.parseHTML("<img src=''>");
            filereader.onload = function(){
                $img[0].src=this.result;
            };
            filereader.readAsDataURL(this.files[i]);
            $(".filearray").append($img);
        }


    });
});
</script>

希望这有帮助。

Answer 2

还有其他方法可以实现文件预览＆amp;上传。您可以使用jQuery插件，在搜索中我在GitHub上找到了一个来自opoloo的插件。我确定还有很多其他人。

或者您可以使用一些JavaScript并创建预览功能，这里是codexworld.com的示例：

function filePreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#uploadForm + img').remove();
            $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

另一种选择是使用Optizilla或Cloudinary等服务来简化文件的jQuery文件上传（以及任何需要的操作）。 Cloudinary具有开源jQuery库，可以将进程与现有的jQuery代码集成。

在上传之前上传多个文件图像并在jQuery中预览

2 个答案: