利用 HTML 5 的多图片上传及预览（不含前端的文件分割）

最新推荐文章于 2021-06-05 01:44:00 发布
最新推荐文章于 2021-06-05 01:44:00 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： HTML5 文件上传 上传图片的预览 XMLHTTPRequest对象 文章标签： HTML5 多图片上传 图片上传前预览 XMLHTTPRequest对象传文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snow_finland/article/details/18216793
版权

主要运用

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 οnlοad="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、上传没有进行分段处理

snow_finland
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js HTML5多图片上传及预览实例解析（不含前端的文件分割）
11-23
本文实例为大家分享了js HTML5多图片上传及预览实例，供大家参考，具体内容如下 主要运用  1、HTML5 files可以选择多文件，以及获取多文件信息  2、XMLHTTPRequest对象，发送HTTP传输请求  3、将每一个文件放在...
利用 HTML 5 的多图片上传及预览（不含前端的文件分割） 分类： HTM...
weixin_30794491的博客
01-13 110
主要运用 1、HTML5 files可以选择多文件，以及获取多文件信息 2、XMLHTTPRequest对象，发送HTTP传输请求 3、将每一个文件放在FormData，进行传输 4、利用readAsDataURL将图片内容直接变成url，放在img标签的src当中，生成可预览的图片 html+css+js代码 <!DOCTYPE html> &...
html5选择多张图片在页面内预览并上传到后台
热门推荐
GrowingMon的博客
07-11 6万+
需求：点击选择图片(可选多张)，确定后将选择的图片显示在页面上，点击提交将图片提交给后台。 效果图： <label>请选择一个图像文件：</label> <input type="file" id="pic_selector" multiple/> <!--multiple，可选择多张图片-->...
HTML5实现多个图片预览上传
itscassie_的博客
09-13 2271
用户每个选择的文件都是一个files对象  而fileList对象则为这些files对象的列表  代表用户选择的所有文件。 FileReader接口主要用来把文件读入内存  并且读取文件中的数据。FileReader接口提供了一个异步api  使用该api可以在浏览器主线程中异步访问文件系统  读取文件中的数据。 readAsDataUrl ：将文件读取为DataURL readAsText...
html5 jquery多图片上传预览,jQuery+HTML5实现图片上传前预览效果
weixin_42190030的博客
06-05 180
本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下：这里主要是使用HTML5 的File API,建立一??可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。运行效果如下图所示：在线演示地址如下：http://demo.gimo...
html5在线预览附件,干货-基于html5的本地多图上传并可在线预览
weixin_42527178的博客
05-30 423
今天博主给大家分享一个免插件多图上传的代码，通过html5将本地图片上传服务器并实现上传之前的图片预览。博主只写前端代码，后台代码自己研究哈。HTML5是个好东西，其中之一就是支持多图片上传，其二支持ajax上传，其三支持上传之前图片的预览，其四支持图片拖拽上传，纯粹利用file控件实现，JS代码寥寥，想不让人称赞都难啊！1.html代码晒图片注意：multiple属性，规定输入字段可选择多个值，...
HTML5实现多文件图片预览上传实例代码
11-07
HTML5实现多文件图片预览上传实例代码 HTML5实现多文件图片预览上传实例代码
一次选择多个文件上传+图片预览。HTML5源代码支持PC浏览器端和手机移动端.zip
11-15
多选多个文件上传+图片预览。H5源代码支持PC浏览器端和手机移动端.zip
html5实现多图片预览上传及点击可拖拽控件
09-27
主要介绍了html5实现多图片预览上传及点击可拖拽控件的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5实现多图片上传预览（源码，已测试）
03-06
html5实现多图片上传预览（源码，已测试）
html5多图片上传预览
09-29
html5多图片上传，可显示多图上传之后的预览效果。
html5移动端图片上传本地生成缩略图预览（单图上传）
11-19
html5移动端图片上传本地生成缩略图预览，单图上传
简单JS实现多图上传和预览
12-19
简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览简单的上传图片预览
html多图片上传并在线预览
01-10
html多图片上传并在线预览 用javascript实现
html5预览并上传图片的功能
纸上得来终觉浅
07-28 1万+
如何使用html5 fileReader来上传图片呢？
javascript和HTML5上传图片之前实现预览效果
weixin_33994429的博客
06-28 165
一：FileList对象与file对象      FileList对象表示用户选择的文件列表，在HTML4中，file控件内只允许放置一个文件，但是到了HTML5中，通过添加multiple属性，file控件内允许一次放置多个文件，控件内的每一个用户选择的文件都是一个file对象，而FileList对象是file对象的列表； 比如如下代码： 选择文件&lt;input type="fil...
HTML5图片上传前预览（支持多选）
冬冬博客
03-20 3664
HTML5实现图片上传前预览！ 本例主要是使用HTML5 的File API，创建一个可存取到该file的url，利用url生成img的DOM对象，实现图片预览功能。 请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。
前端预览多张图片合成的图片文件如何让他自动放大
最新发布
05-30
你可以使用CSS的`transform`属性来实现图片自动放大。具体来说，你可以使用`scale()`函数将图片放大至你需要的大小，例如： ```css img { transform: scale(2); } ``` 这会将所有的图片放大两倍。你可以自行调整`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值