js HTML5多图片上传及预览实例解析（不含前端的文件分割）
本文实例为大家分享了jsHTML5多图片上传及预览实例，供大家参考，具体内容如下
主要运用
1、HTML5files可以选择多文件，以及获取多文件信息
2、XMLHTTPRequest对象，发送HTTP传输请求
3、将每一个文件放在FormData，进行传输
4、利用readAsDataURL将图片内容直接变成url，放在img标签的src当中，生成可预览的图片
html+css+js代码
<!DOCTYPEhtml>
<head>
<metahttp-equiv="Content-Type"content="text/html"charset="utf-8"/>
<title>testhtmlFileReader</title>
<styletype="text/css">
html,body,header,footer,div,ul,li,h1,h2,h3,h4,h5,h6,label,input,textarea,p,span,a{
padding:0;
margin:0;
}
img{
border:0;
}
em,strong{
font-weight:normal;
font-style:normal;
}
ul{
list-style:none;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
font-size:100%;
}
a,a:after{
text-decoration:none;
}
.photo_wrap{
clear:both;
}
.photo_wrapli{
margin:10px;
width:150px;
float:left;
}
.photo_box{
height:150px;
width:150px;
overflow:hidden;
position:relative;
}
.photo_box.img1{
height:150px;
}
.photo_box.img2{
width:150px;
}
.upload_result{
height:50px;
}
.btns{
position:relative;
height:40px;
width:100px;
float:left;
}
.btn{
height:40px;
line-height:40px;
color:#FFF;
display:block;
border-radius:3px;
text-align:center;
background-color:#FF5581;/*Oldbrowsers*/
background-image:-moz-linear-gradient(top,#FA7B9C0%,#FF5581100%);/*FF3.6+*/
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#FA7B9C),color-stop(100%,#FF5581));/*Chrome,Safari4+*/
background-image:-webkit-linear-gradient(top,#FA7B9C0%,#FF5581100%);/*Chrome10+,Safari5.1+*/
background-image:-o-linear-gradient(top,#FA7B9C0%,#FF5581100%);/*Opera11.10+*/
background-image:-ms-linear-gradient(top,#FA7B9C0%,#FF5581100%);/*IE10+*/
background-image:linear-gradient(tobottom,#FA7B9C0%,#FF5581100%);/*W3C*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FA7B9C',endColorstr='#FF5581',GradientType=0);/*IE6-8*/
box-shadow:01px0rgba(255,255,255,0.3)inset,01px2pxrgba(0,0,0,0.3);
}
.btn_add_pic{
width:100px;
position:absolute;
top:0;
left:0;
}
.btn_upload{
width:100px;
margin:010px10px;
float:left;
}
.btn:hover,
.btn_cur{
background-color:#FB99B1;/*Oldbrowsers*/
background-image:-moz-linear-gradient(top,#FB99B10%,#FF5581100%);/*FF3.6+*/
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#FB99B1),color-stop(100%,##FF5581));/*Chrome,Safari4+*/
background-image:-webkit-linear-gradient(top,#FB99B10%,#FF5581100%);/*Chrome10+,Safari5.1+*/
background-image:-o-linear-gradient(top,#FB99B10%,#FF5581100%);/*Opera11.10+*/
background-image:-ms-linear-gradient(top,#FB99B10%,#FF5581100%);/*IE10+*/
background-image:linear-gradient(tobottom,#FB99B10%,#FF5581100%);/*W3C*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FB99B1',endColorstr='#FF5581',GradientType=0);/*IE6-8*/
}
.file_input_wrap{
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
}
.file_input_wraplabel{
width:100%;
height:100%;
display:block;
opacity:0;
cursor:pointer;
}
.file_input_wrapinput{
opacity:0;
filter:alpha(opacity=0);/*ie8及以下*/
position:absolute;
top:7px;
right:173px;
cursor:pointer;
width:95px;
}
.photo_box.icon_pos{
height:20px;
width:20px;
display:block;
position:absolute;
right:0;
bottom:0;
}
.photo_box.loading{
height:10px;
display:block;
position:absolute;
left:0;
bottom:0;
background-image:url(loading.gif);
}
.sucess_icon{
background-image:url(icons_01.png);
background-position:00;
}
.error_icon{
background-image:url(icons_01.png);
background-position:-20px0;
}
</style>
</head>
<body>
<divclass="btns">
<aclass="btnbtn_add_pic"id="J_add_pic"href="javascript:;">添加图片</a>
<divclass="file_input_wrap">
<inputtype="file"id="file"name="file"accept="image/*"multipleonChange="fileInfo(this)"/>
<labelid="J_add_area"></label>
</div>
</div>
<aclass="btnbtn_upload"id="J_upload"href="javascript:;">开始上传</a>
<divid="J_photo_wrap">
<ulclass="photo_wrap">
</ul>
</div>
</body>
<scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>
<scripttype="text/javascript">
varimg_index=newArray();
functionupload_img(){
varj=0;
img();
functionimg(){
//1.创建XMLHTTPRequest对象
if(img_index.length>0){
varsingleImg=img_index[j];
varxmlhttp;
if(window.XMLHttpRequest){
//IE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest;
//针对某些特定版本的mozillar浏览器的bug进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType('text/xml');
};
}elseif(window.ActiveXObject){
//IE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
};
if(xmlhttp.upload){
//进度条
xmlhttp.upload.addEventListener("progress",
function(e){
if(e.lengthComputable){
varload_percent=(e.loaded/e.total)*100;
$('#J_photo_wrapulli').eq(j).find('.loading').css('width',load_percent+'%');
}
},
false);
//2.回调函数
//onreadystatechange是每次readyState属性改变的时候调用的事件句柄函数
xmlhttp.onreadystatechange=function(e){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
varjson=eval('('+xmlhttp.responseText+')');
if(json.status==1){
$('#J_photo_wrapulli').eq(j).find('.upload_result').text(singleImg.name+'上传完成');
$('#J_photo_wrapulli').eq(j).find('.loading').hide();
$('#J_photo_wrapulli').eq(j).find('.icon_pos').addClass('sucess_icon');
}else{
$('#J_photo_wrapulli').eq(j).find('.upload_result').text(singleImg.name+'上传失败');
$('#J_photo_wrapulli').eq(j).find('.loading').hide();
$('#J_photo_wrapulli').eq(j).find('.icon_pos').addClass('error_icon');
}
}else{
$('#J_photo_wrapulli').eq(j).find('.upload_result').text(singleImg.name+'上传失败');
$('#J_photo_wrapulli').eq(j).find('.loading').hide();
$('#J_photo_wrapulli').eq(j).find('.icon_pos').addClass('error_icon');
}
if(j<img_index.length-1){
j++;
img();
}
}
};
//3.设置连接信息
//初始化HTTP请求参数，但是并不发送请求。
//第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步
//使用post方式发送数据
xmlhttp.open("POST","upload.php",true);
//4.发送数据，开始和服务器进行交互
//发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求中如果true,send这句话会立即执行
//如果是false（同步），send会在服务器数据回来才执行
//get方法在send中不需要内容
varformdata=newFormData();
formdata.append("FileData",singleImg);
xmlhttp.send(formdata);
}
//}
}
}
};
$('#J_upload').click(function(){
upload_img();
});
$('#J_add_area').hover(
function(){
$('#J_add_pic').addClass('btn_cur');
},
function(){
$('#J_add_pic').removeClass('btn_cur');
}
);
$('#J_add_area').click(function(){
$('#file').click();
});
functionresize(img){
if(img.offsetHeight>img.offsetWidth){
$(img).removeClass('img1').addClass('img2');
}else{
$(img).removeClass('img2').addClass('img1');
}
}
functionfileInfo(source){
varireg=/image\/.*/i;
varfiles=source.files;
varname,size,type;
for(vari=0,f;f=files[i];i++){
name=f.name;
size=f.size;
type=f.type;
if(!type.match(ireg)){
$('#J_photo_wrapul').append('<li><divclass="photo_box">'+name+'不是图片<spanclass="loading"></span><spanclass="icon_pos"></span></div><divclass="upload_result"></div></div></li>');
}else{
img_index.push(f);
if(size>1048576){
$('#J_photo_wrapul').append('<li><divclass="photo_box">'+name+'太大，无法生成预览<spanclass="loading"></span><spanclass="icon_pos"></span></div><divclass="upload_result"></div></li>');
}else{
if(window.FileReader){
varfr=newFileReader();
fr.onload=(function(f){
returnfunction(e){
$('#J_photo_wrapul').append('<li><divclass="photo_box"><imgonload="resize(this);"src="'+this.result+'"/><spanclass="loading"></span><spanclass="icon_pos"></span></div><divclass="upload_result"></div></li>');
};
})(f);
fr.readAsDataURL(f);
}
}
}
}
};
</script>
</html>
php收到文件的代码（这里只获取文件名字、类型、大小，没有进行其它操作）
<?php $name=$_FILES['FileData']['name']; $type=$_FILES['FileData']['type']; $size=$_FILES['FileData']['size']; $return=array( "name"=>$name, "type"=>$type, "size"=>$size, "status"=>1 ); $return=json_encode($return); echo$return; ?>
存在的问题
1、为了生成缩略图，readAsDataURL读取文件内容会占用内存，所以大图片会造成浏览器卡住或者奔溃
2、上传没有进行分段处理
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。