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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				height: 200px;
				 600px;
				border: 1px solid black;
				margin: 100px auto;
			}
			.demo img{
				height: 100px;
				 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上传 ，后台有点弱不知道数据怎么取，但是可以肯定数据上传成功了

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