上传前多图像preVIEW [英] Multiple image preview before upload
本文介绍了上传前多图像preVIEW的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想previewing多张图片，但问题是我的codeS只是工作，如果我上传2张图片。我想previewing高达用户上传。
这是我的javascript：
VAR ABC = 0; //声明和定义全局increement变量
$（文件）。就绪（函数（）{
$（'＃文件）。点击（函数（）{
$（本）。前（$（＆LT; DIV /＆gt;中，{ID：'filediv'}。）淡入（慢）追加（
$（＆LT;输入/＆gt;中，{名称：文件[]'，键入：文件，编号：'文件'}），
$（＆LT; BR /＆GT;＆LT; BR /＆gt;中）
））;
}）;
$（'身体'）。在（'变'，'#FILE'，函数（）{
如果（this.files＆安培;＆安培; this.files [0]）{
ABC + = 1; // 1 increementing全局变量
变种Z = ABC - 1;
。VAR X = $（本）.parent（）找到（'＃previewimg'+ Z）上卸下摆臂（）;
$（本）。之前（＆LT; DIV ID ='ABCD+ ABC +'级='ABCD'＆GT;＆LT; IMG ID ='previewimg+ ABC +'SRC =''/＆GT ;＆LT; / DIV＆gt;中）;
VAR读卡器=新的FileReader（）;
reader.onload = imageIsLoaded;
reader.readAsDataURL（this.files [0]）;
$（本）.hide（）;
$（＃ABCD+ ABC）.append（$（＆LT; IMG /＆gt;中，{ID：IMG，SRC：x.png，ALT：'删除'}）。点击（函数（ ）{
。$（本）.parent（）父（）删除（）;
}））;
}
}）;
功能imageIsLoaded（五）{
$（'＃previewimg'+ ABC）.attr（'src'中，e.target.result）;
};
$（'＃上传）。点击（函数（五）{
变种名称= $（：文件）VAL（）。
如果（！名）
{
警报（第一形象必须选择）;
即preventDefault（）;
}
}）;
}）;
这是我的 FIDDLE 需要你的帮助来解决这个问题。
解决方案
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆gt;在jQuery和LT上传图片; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
变种storedFiles = [];
$（'＃myfiles的'）。在（'改变'，函数（）{
$（'＃信息）HTML（''）。
VAR myfiles的=的document.getElementById（'myfiles的'）;
var中的文件= myfiles.files;
变种I = 0;
对于（i = 0; I＆LT; files.length;我++）{
VAR readImg =新的FileReader（）;
var文件=文件[I]
如果（file.type.match（'的形象。*））{
storedFiles.push（文件）;
readImg.onload =（函数（文件）{
复位功能（E）{
$（'＃UPLOADEDFILES）追加（'＆LT; TR类=的imageinfo＆GT;＆LT; TD＆GT;＆LT; IMG宽度=80高度=70 src="'+e.target.result+'"/></td><td>'+file.name+'</td><td>'+Math.round((file.size/1024))+'KB</td><td><a HREF =级=lnkcancelimage文件=+ file.name +'标题=取消＆GT;＆LT; IMG SRC =delete.png宽度= 34高度=34/＆GT;＆LT; / A＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT;'）;
};
}）（文件）;
readImg.readAsDataURL（文件）;
}其他{
警报（'文件'+ file.name +不是一个图像＆LT; BR /＆GT;'）;
}
}
}）;
$（'＃UPLOADEDFILES'）。在（'点击'，'a.lnkcancelimage'，函数（）{
。$（本）.parent（）父（）HTML（''）;
var文件= $（本）.attr（文件）;
对于（VAR I = 0; I＆LT; storedFiles.length;我++）{
如果（storedFiles [我]。名称==文件）{
storedFiles.splice（ⅰ，1）;
打破;
}
}
返回false;
}）;
$（'＃lnkupload）。点击（函数（）{
VAR数据=新FORMDATA（）;
变种I = 0;
对于（i = 0; I＆LT; storedFiles.length;我++）{
data.append（'文件'+ I，storedFiles [I]）;
}
如果（ⅰ大于0）{
$阿贾克斯（{
网址：load.php，
键入：POST，
的contentType：假的，
数据：数据，
过程数据：假的，
缓存：假的
}）。完成（功能（MSG）{
storedFiles = [];
如果（MSG）{
警报（味精）;
}其他{
$（'＃信息）HTML（'图片上传成功）。
}
}），失败（函数（）{
警报（'错误'）;
}）;
}
返回false;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =包装＆GT;
＆LT;标签＆gt;＆LT;强＆GT;上传多张图片＆LT; / STRONG＆GT;＆LT; /标签＆gt;
＆LT;输入ID =myfiles的类型=文件名称=myfiles的[]多个=多个/＆GT;
＆所述; A HREF =的id =lnkupload＆GT;上传＆所述; / a取代;
＆LT;表ID =UPLOADEDFILES＆GT;
<tr><th>Image</th><th>Name</th><th>Size</th><th>Actions</th></tr>
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
i want to previewing multiple images, but the problem is my codes just work if i'm uploading 2 images. i want to previewing as much as user uploads.
it's my javascript :
var abc = 0; //Declaring and defining global increement variable
$(document).ready(function() {
$('#file').click(function() {
$(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'file[]', type: 'file', id: 'file'}),
$("<br/><br/>")
));
});
$('body').on('change', '#file', function(){
if (this.files && this.files[0]) {
abc += 1; //increementing global variable by 1
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'x.png', alt: 'delete'}).click(function() {
$(this).parent().parent().remove();
}));
}
});
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name)
{
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});
and here's my FIDDLE need your help to solve it.
解决方案
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload images with Jquery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var storedFiles = [];
$('#myfiles').on('change', function() {
$('#messages').html('');
var myfiles = document.getElementById('myfiles');
var files = myfiles.files;
var i=0;
for (i = 0; i<files.length; i++) {
var readImg = new FileReader();
var file=files[i];
if(file.type.match('image.*')){
storedFiles.push(file);
readImg.onload = (function(file) {
return function(e) {
$('#uploadedfiles').append('<tr class="imageinfo"><td><img width="80" height="70" src="'+e.target.result+'"/></td><td>'+file.name+'</td><td>'+Math.round((file.size/1024))+'KB</td><td><a href="" class="lnkcancelimage" file="'+file.name+'" title="Cancel"><img src="delete.png" width=34" height="34"/></a></td></tr>');
};
})(file);
readImg.readAsDataURL(file);
}else{
alert('the file '+file.name+' is not an image<br/>');
}
}
});
$('#uploadedfiles').on('click','a.lnkcancelimage',function(){
$(this).parent().parent().html('');
var file=$(this).attr('file');
for(var i=0;i<storedFiles.length;i++) {
if(storedFiles[i].name == file) {
storedFiles.splice(i,1);
break;
}
}
return false;
});
$('#lnkupload').click(function(){
var data = new FormData();
var i=0;
for(i=0; i<storedFiles.length; i++) {
data.append('files'+i, storedFiles[i]);
}
if(i>0){
$.ajax({
url: 'load.php',
type: 'POST',
contentType: false,
data: data,
processData: false,
cache: false
}).done(function(msg) {
storedFiles = [];
if(msg){
alert(msg);
}else{
$('#messages').html('Images uploaded successfully');
}
}).fail(function() {
alert('error');
});
}
return false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<label><strong>Uploading multiple images</strong></label>
<input id="myfiles" type="file" name="myfiles[]" multiple="multiple" />
<a href="" id="lnkupload">Upload</a>
<table id="uploadedfiles">
<tr><th>Image</th><th>Name</th><th>Size</th><th>Actions</th></tr>
</table>
</div>
</body>
</html>
这篇关于上传前多图像preVIEW的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
