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

前端技术 2023/09/08 JavaScript

本文实例为大家分享了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、上传没有进行分段处理

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

本文地址：https://www.stayed.cn/item/22613

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案