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、上传没有进行分段处理

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

Javascript 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
夯基础之手撕javascript继承详解
Nov 09 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
You might like
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
JS高级笔记
2011/07/13 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
javascript每日必学之封装
2016/02/23 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
详解jQuery设置内容和属性
2019/04/11 jQuery
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
如何实现一个自定义类的序列化
2012/05/22 面试题
Java程序员面试90题
2013/10/19 面试题
自我鉴定范文300字
2013/10/01 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
格列夫游记读书笔记
2015/07/01 职场文书