我试图让我的网站上的用户上传多张照片,也预览一次使用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>
2条答案
按热度按时间qgelzfjb1#
我不知道我是否理解你的问题。当一个图像预览和用户添加另一个图像,但前一个图像消失了,对吗?我对你的代码做了一些修改,让答案更清晰。
我想知道为什么不让用户上传多个文件一次。下面的代码是多输入版本。
希望这对你有帮助。
y1aodyip2#
还有其他方法来实现文件预览和上传。你可以使用一个jQuery插件,在搜索中,我在GitHub上找到了一个来自opoloo的插件。我相信还有很多其他人。
或者你可以使用一些JavaScript并创建一个预览函数,这里有一个来自codexworld.com的例子:
另一种选择是使用Optizilla或Cloudinary等服务来简化jQuery文件上传(以及任何需要的操作)。Cloudinary拥有开源的jQuery库,可以将该过程与现有的jQuery代码集成。