上传前在jQuery中添加多个文件图像和预览

0sgqnhkj  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(91)

我试图让我的网站上的用户上传多张照片,也预览一次使用jQuery更改,但我的问题是,第一个文件一次更改预览,然后附加一个新的文件输入,但附加的一个不预览一次更改。
我不知道问题出在哪里,我已经想了好几个小时了,但还没有。

$(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);
  });
});
<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>
qgelzfjb

qgelzfjb1#

我不知道我是否理解你的问题。当一个图像预览和用户添加另一个图像,但前一个图像消失了,对吗?我对你的代码做了一些修改,让答案更清晰。

<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>

希望这对你有帮助。

y1aodyip

y1aodyip2#

还有其他方法来实现文件预览和上传。你可以使用一个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代码集成。

相关问题