首页
所有分类
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压缩混淆工具
May 16 Javascript
可实现多表单提交的javascript函数
Aug 01 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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
win7(2) 虚拟键盘(1) 滚动条(1) 鸿蒙(2) RustDesk(1) 蓝屏(1) 输入法(2) Debian(1) 声卡驱动(1) 鸿蒙3.0(1)
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript一些不错的函数脚本代码
2008/09/10 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
利用javascript实现的三种图片放大镜效果实例（附源码）
2017/01/23 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[05:13]TI4 中国战队 机场出征！！
2014/07/07 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
浅析Python __name__ 是什么
2020/07/07 Python
python类共享变量操作
2020/09/03 Python
美国在线珠宝商店：SZUL
2017/02/11 全球购物
美国高端医师级美容产品电商：BeautifiedYou.com
2017/04/17 全球购物
意大利拉斐尔时尚购物网：Raffaello Network（支持中文）
2018/11/09 全球购物
KENZO官网：高田贤三在法国创立的品牌
2019/05/16 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
《藏戏》教学反思
2014/02/11 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
给客户的检讨书
2014/12/21 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA