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

我想让我的网站上的用户上传多张照片，并使用jQuery预览一次，但我的问题是，第一个文件一旦更改预览，然后追加一个新的文件输入，但附加的文件不会在更改时预览一次。在上传之前上传多个文件图像并在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>

来源

2017-10-15 hacker

我不知道我是否理解您的问题well.When一个图像预览和用户增加了一个形象，但前面的图像消失了，对不对？我对代码做了一些更改，使答案更清晰。

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

希望这会有所帮助。

来源

2017-10-16 03:18:17

还有其他方法可以实现文件预览&上传。你可以使用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代码进行整合。

来源

2017-10-24 09:55:01

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

回答

相关问题