<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			.box{

				height: 200px;

				width: 600px;

				border: 1px solid black;

				margin: 100px auto;

			}

			.demo img{

				height: 100px;

				width: 100px;

				border: 5px solid #CCCCCC;

			}

		</style>

	</head>

	<body>

		<div class="box">

			<input type="file" name="" id="btn" value="文件上传" multiple="multiple" />

			<input type="button" id="btn1" value="ajax提交到服务器" />

			<div class="demo"></div>

		</div>

		<script src="hezhifile.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			//存储所有文件的预览信息

			var sumfile = [];

			//控件上传

			var btn = document.getElementById("btn");

				btn.onchange = function(){

					var ffs = []

					for (var i=0;i<this.files.length;i++) {

						ffs[i] = this.files[i]

					}

				sumfile = sumfile.concat(ffs)

					//过滤文件

					//var ffs = fileFilter(ffs);

					//读取文件

					for (var i=0;i<ffs.length;i++) {

						(function(i){

							var freader = new FileReader();

							freader.readAsDataURL(ffs[i],'gbk')

							freader.onload = function(){

								var result = freader.result;

								var img = document.createElement('img');

								img.src = result;

								document.querySelector('.demo').appendChild(img)

							}

						})(i)

					}

					this.value= "";//用自定义按钮来做，原生的太丑了

					console.log(sumfile);

				}

			//过滤文件的函数

			function fileFilter(files){

				for(var i=0;i<files.length;i++){

					if(files[i].size>5000){

						alert(files[i].name+'该图片大于5000，上传失败')

						files.splice(i,1)

					}

				}

				return files

			}

			//拖拽上传

			var obox = document.querySelector('.box');

			obox.ondragover = function(ev){

				var ev = ev || event;

				ev.preventDefault()

				ev.stopPropagation()

			}

			obox.ondrop = function(ev){

				var ev = ev || event;

				 ev.preventDefault();

				 var ffs = []

				for (var i= 0;i < ev.dataTransfer.files.length;i++) {

					ffs[i] = ev.dataTransfer.files[i]

				}

				//一个拖动多上上传

				sumfile = sumfile.concat(ffs);

				var freader = new FileReader();

					freader.readAsDataURL(ffs[0],'gbk')

					freader.onload = function(){

						var result = freader.result;

						var img = document.createElement('img');

						img.src = result;

						document.querySelector('.demo').appendChild(img)

					}

				console.log(sumfile);

			}

			//ajax 上传

		var  btn1 = document.querySelector('#btn1');

		btn1.onclick = function(){

			for(var i=0;i< sumfile.length;i++){

				(function(i){

					var formData = new FormData();

					//formData.append('name',sumfile[i].name)

					formData.append("userfile", sumfile[i]);

					var xhr = new XMLHttpRequest();

					xhr.open('post','01.php',true)

					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

					xhr.send(formData)

					xhr.onreadystatechange= function(){

						if(xhr.readyState==4&&xhr.status==200){

							var result =  xhr.responseText;

							document.body.innerHTML+=result

						}

					}

				})(i)

			}

			//取出每个文件一个个上传

		}

		</script>

	</body>

</html>

h5可预览 图片ajax上传 ，后台有点弱不知道数据怎么取，但是可以肯定数据上传成功了的更多相关文章

  1. h5可预览 图片ajax上传 （补更），后台数据获取方法---php

    原理是 先获取,然后手动转移文件路径,不然会被服务器自动删除 demo如下: <?php header('content-Type:text/html;charset=utf-8'); $fil ...

  2. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  3. 前端预览图片和H5canvas压缩图片上传

    思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...

  4. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  5. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  6. [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  7. Thinkphp5+plupload图片上传功能，支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  8. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

  9. 富文本编辑器handyeditor，上传和预览图片的host地址不一样

    使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...

随机推荐

  1. 《高性能javascript》 --- in case of odd number of items（奇怪的条目的数量）

    不知道是做着故意放的还是什么原因.总之运行后就会出现问题(奇怪的条目的数量) function merge(left, right){ var result = []; while (left.len ...

  2. Ultimus BPM 零售和快消品行业应用解决方案

    Ultimus BPM 零售和快消品行业应用解决方案 行业应用需求 中国零售及快消品行业正在经历深刻变化.经济下滑,消费回落,行业危机继续发酵:人员工资.房租费用进一步上涨,成本高涨成为不能承受之重: ...

  3. Html_Task4(知识点：水平居中+垂直居中/position/float/border-radius)

    任务四:定位和居中问题 任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和 ...

  4. find命令之xargs,exec

    一,find命令之xargs: 在 使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命 令长度有限制,这样 ...

  5. PropertyGrid自定义控件

    PropertyGrid是一个很强大的控件,使用该控件做属性设置面板的一个好处就是你只需要专注于代码而无需关注UI的呈现,PropertyGrid会默认根据变量类型选择合适的控件显示.但是这也带来了一 ...

  6. Python3.6_x86通过FFpmeg获取视频或音频的时长和分辨率

    前言 前段时间公司在做流媒体服务,与许多厂家合作拿了许多视频过来,现在要对这些视频文件进行整理,通过特殊的编码排列,获取他们的时长以及分辨率,这里我遇到一个大坑,请往下面看. # -*- coding ...

  7. 咦，好像可以自己做个webapi框架了-IRouteHandler的使用

    当我们学习到一定程度的时候,我们会想要去深入了解代码底层的东西,也更想拥有一个属于自己的框架,当然,博主也正是如此.本文可能成为编写一个webapi框架的开端.有研究MVC框架的朋友会发现,mvc框架 ...

  8. 如何修改＂DEDECMS 提示信息!＂方法!

    dedecms程序使用过程中,经常有一些跳转提示信息会出现“DEDECMS 提示信息!”这几个字样. 很多朋友都想对他进行修改,改为自己网站的提示信息,其实方法也是很简单的,方法如下: 用编辑器打开i ...

  9. map,zip,reduce函数

    lt=range(5,10) lw=range(8,13) def mul(a,b): return a*b def mul_list(param1,param2): return_list=[] f ...

  10. Mac系统占用空间大、空间不够、查看系统文件大小分布

    最近电脑老提示空间不够,甚是心烦,决定研究下,为啥空间这么快就花完了. 如图,256的空间,就剩下几个G了,其中最大头的系统占用:160G,占比60%多,我勒个擦... 正常情况下:我们可以点击管理, ...