首页
所有分类
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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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
YB235(1) S2000(3) YB217(1) 南麂列岛(1) 台湾(1) MX500(1) 直流胆(1) PL660(1) 森海(1) YB400(2)
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php轻松实现文件上传功能
2016/03/03 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
js数组操作学习总结
2013/11/04 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python tornado修改log输出方式
2019/11/18 Python
Python嵌套函数，作用域与偏函数用法实例分析
2019/12/26 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Python 必须了解的5种高级特征
2020/09/10 Python
详解如何修改python中字典的键和值
2020/09/29 Python
加州风格的游泳和沙滩装品牌：Cupshe
2019/06/10 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
2014年财务人员工作总结
2014/11/11 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
DIY胆机必读：各国电子管评价
2022/04/06 无线电