<!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. PHP简单分页省略中间页码

    <?php /** * @desc created by sublime text3 * @author jxl <[57953279@qq.com>]> * @since 2 ...

  2. JS实现鼠标移上去图片停止滚动移开恢复滚动效果

    这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...

  3. Vulkan Tutorial 05 逻辑设备与队列

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 在选择要使用的物理设备之后,我们需要设置一个逻辑设备用于交 ...

  4. cursor 属性

    鼠标 样式 default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标. crosshair 光标呈现为十字线. pointer 光标呈现为指示链接的指针(一只手) move 此光标 ...

  5. Eclipse导入项目常见问题----乱码问题03

    有时打开导入的项目文件时,会出现如下图情况: 解决方法 如下图步骤所示: 此时,我们可以看到文件正常了 jdk版本问题(有个红色感叹号)01:http://blog.csdn.net/baidu_37 ...

  6. DFS and BFS

    DFS https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master ...

  7. java中的中文参数存到数据库乱码问题

    关于java中的中文参数乱码问题,遇见过很多,若开发工具的字符集环境和数据库的字符集环境都一样,存到数据库中还是乱码的话,可以通过以下方法解决: 用数据库客户端检查每个字段的字符集和字符集校对和这个表 ...

  8. css样式，边界和边框，格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  9. 通过JSP+servlet实现文件上传功能

    在TCP/IP中,最早出现的文件上传机制是FTP.它将文件由客户端到服务器的标准机制. 但是在JSP中不能使用FTP来上传文件,这是有JSP的运行机制所决定的. 通过为表单元素设置Method=&qu ...

  10. MyBatis介绍

    MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis 使用简单的 XML或注解用于配 ...