js HTML5多图片上传及预览实例解析（不含前端的文件分割）

2019-11-20 09:08:42

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js HTML5多图片上传及预览实例，供大家参考，具体内容如下

主要运用
1、HTML5 files可以选择多文件，以及获取多文件信息
2、XMLHTTPRequest对象，发送HTTP传输请求
3、将每一个文件放在FormData，进行传输
4、利用readAsDataURL将图片内容直接变成url，放在img标签的src当中，生成可预览的图片

html+css+js代码

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html" charset="utf-8" /><title>test html FileReader</title><style type="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_wrap li{ 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; /* Old browsers */ background-image: -moz-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA7B9C), color-stop(100%,#FF5581)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top,#FA7B9C 0%, #FF5581 100%); /* IE10+ */ background-image: linear-gradient(to bottom,#FA7B9C 0%, #FF5581 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FA7B9C', endColorstr='#FF5581',GradientType=0 ); /* IE6-8 */ box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.3);}.btn_add_pic{ width:100px; position:absolute; top:0; left:0;}.btn_upload{ width:100px; margin:0 10px 10px; float:left;}.btn:hover,.btn_cur{ background-color: #FB99B1; /* Old browsers */ background-image: -moz-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB99B1), color-stop(100%,##FF5581)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Chrome10+,Safari5.1+ */ background-image: -o-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* Opera 11.10+ */ background-image: -ms-linear-gradient(top,#FB99B1 0%, #FF5581 100%); /* IE10+ */ background-image: linear-gradient(to bottom,#FB99B1 0%, #FF5581 100%); /* 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_wrap label{ width:100%; height:100%; display:block; opacity:0; cursor:pointer;}.file_input_wrap input{ 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:0 0;}.error_icon{ background-image:url(icons_01.png); background-position:-20px 0;}</style></head><body><div class="btns"> <a class="btn btn_add_pic" id="J_add_pic" href="javascript:;">添加图片</a> <div class="file_input_wrap"> <input type="file" id="file" name="file" accept="image/*" multiple onChange="fileInfo(this)" /> <label id="J_add_area"></label> </div></div><a class="btn btn_upload" id="J_upload" href="javascript:;">开始上传</a><div id="J_photo_wrap"> <ul class="photo_wrap"> </ul></div></body><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">  var img_index = new Array();  function upload_img(){ var j=0; img(); function img(){ //1.创建XMLHTTPRequest对象 if (img_index.length > 0){ var singleImg = img_index[j]; var xmlhttp; if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest;  //针对某些特定版本的mozillar浏览器的bug进行修正 if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); }; } else if (window.ActiveXObject){ //IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); };  if(xmlhttp.upload){ //进度条 xmlhttp.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var load_percent = (e.loaded / e.total) * 100; $('#J_photo_wrap ul li').eq(j).find('.loading').css('width',load_percent+'%'); } }, false); //2.回调函数 //onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数 xmlhttp.onreadystatechange = function(e){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){  var json = eval('(' + xmlhttp.responseText + ')');  if(json.status == 1){  $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'上传完成');  $('#J_photo_wrap ul li').eq(j).find('.loading').hide();  $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('sucess_icon');  }else{  $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'上传失败');  $('#J_photo_wrap ul li').eq(j).find('.loading').hide();  $('#J_photo_wrap ul li').eq(j).find('.icon_pos').addClass('error_icon');  }  }else{  $('#J_photo_wrap ul li').eq(j).find('.upload_result').text(singleImg.name+'上传失败');  $('#J_photo_wrap ul li').eq(j).find('.loading').hide();  $('#J_photo_wrap ul li').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中不需要内容 var formdata = new FormData(); 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(); }); function resize(img){ if(img.offsetHeight>img.offsetWidth){ $(img).removeClass('img1').addClass('img2'); }else{ $(img).removeClass('img2').addClass('img1'); } } function fileInfo(source){ var ireg = /image//.*/i; var files = source.files; var name,size,type;  for(var i = 0, f; f = files[i]; i++) { name = f.name; size = f.size; type = f.type;  if(!type.match(ireg)) {  $('#J_photo_wrap ul').append('<li><div class="photo_box">'+name+'不是图片<span class="loading"></span><span class="icon_pos"></span></div><div class="upload_result"></div></div></li>'); }else{ img_index.push(f); if(size>1048576){ $('#J_photo_wrap ul').append('<li><div class="photo_box">'+name+'太大，无法生成预览<span class="loading"></span><span class="icon_pos"></span></div><div class="upload_result"></div></li>'); }else{ if(window.FileReader) {  var fr = new FileReader();  fr.onload = (function(f) { return function(e){ $('#J_photo_wrap ul').append('<li><div class="photo_box"><img onload="resize(this);" src="'+this.result+'"/><span class="loading"></span><span class="icon_pos"></span></div><div class="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、上传没有进行分段处理

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：XMLHttpRequest Level 2 使用指南

下一篇：JavaScript组合模式学习要点