首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 26, 2016

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

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

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

- Author -

snow_finland

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
Vue使用CDN引用项目组件，减少项目体积的步骤
Oct 30 Javascript
JavaScript组合模式学习要点
Aug 26 #Javascript
前端面试题及答案整理(二)
Aug 26 #Javascript
js前端面试题及答案整理（一）
Aug 26 #Javascript
JavaScript中ES6字符串扩展方法
Aug 26 #Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 #Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 #Javascript
响应式表格之固定表头的简单实现
Aug 26 #Javascript
发烧友(1) 电路(15) AM(1) 探测器(1) 原理(1) 频率(1) 鉴频器(1) 灵敏度(1) 频偏(1) 实习报告(1)
You might like
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php字符串截取的简单方法
2013/07/04 PHP
PHP仿博客园 个人博客（1） 数据库与界面设计
2013/07/05 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
yii 框架实现按天，月，年，自定义时间段统计数据的方法分析
2020/04/04 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Python中pass的作用与使用教程
2020/11/13 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
软件测试企业面试试卷
2016/07/13 面试题
JPA的特点
2014/10/25 面试题
初中校园之声广播稿
2014/01/15 职场文书
爱之链教学反思
2014/04/30 职场文书
仲裁协议书
2014/09/26 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python