[英]Image Upload with preview and Delete option - Javascript / Jquery
I have code below that runs perfectly and uploads multiple images.我有下面的代码可以完美运行并上传多张图片。
This is the html and jQuery code:这是 html 和 jQuery 代码:
<div class="field" align="left">
<span>
<h3>Upload your images</h3>
<input type="file" id="files" name="files[]" multiple />
</span>
</div>
The script is as below:脚本如下:
<style>
input[type="file"] {
display:block;
}
.imageThumb {
max-height: 75px;
border: 2px solid;
margin: 10px 10px 0 0;
padding: 1px;
}
</style>
<script type="text/javascript">
$(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;
$("<img></img>",{
class : "imageThumb",
src : e.target.result,
title : file.name
}).insertAfter("#files");
});
fileReader.readAsDataURL(f);
}
});
} else { alert("Your browser doesn't support to File API") }
});
</script>
The code adds multiple images and shows previews of the images too.该代码添加了多个图像并显示了图像的预览。 But now I want that when a user clicks on some button, lets say delete on every image uploaded, it should be removed.但现在我希望当用户点击某个按钮时,假设删除上传的每张图片,它应该被删除。 Not hidden.没有隐藏。
Any help to this will be appreciated!对此的任何帮助将不胜感激!
Try adding this: .click(function(){$(this).remove();});
尝试添加这个: .click(function(){$(this).remove();});
. . It will remove the image by clicking it.它将通过单击删除图像。
EDIT Improved version included.编辑包括改进版本。
EDIT 2 Since people keep asking, please see this answer on manually deleting a file from a FileList (spoiler: it's not possible...).编辑 2由于人们一直在问,请参阅有关从 FileList 手动删除文件的答案(剧透:这是不可能的......)。
$(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; $("<span class=\"pip\">" + "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + "<br/><span class=\"remove\">Remove image</span>" + "</span>").insertAfter("#files"); $(".remove").click(function(){ $(this).parent(".pip").remove(); }); // Old code here /*$("<img></img>", { class: "imageThumb", src: e.target.result, title: file.name + " | Click to remove" }).insertAfter("#files").click(function(){$(this).remove();});*/ }); fileReader.readAsDataURL(f); } }); } else { alert("Your browser doesn't support to File API") } });
input[type="file"] { display: block; }.imageThumb { max-height: 75px; border: 2px solid; padding: 1px; cursor: pointer; }.pip { display: inline-block; margin: 10px 10px 0 0; }.remove { display: block; background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; }.remove:hover { background: white; color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="field" align="left"> <h3>Upload your images</h3> <input type="file" id="files" name="files[]" multiple /> </div>
Use this for remove files values and file preview使用它来删除文件值和文件预览
$(".remove").click(function(){
$(this).parent(".pip").remove();
$('#files').val("");
});`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.