HTML5 – 文件上传

利用XMLHttpRequest快速实现无刷新上传文件。

利用FormData这个对象可以方便的使用表单内的数据，它有以下几个主要函数：

append ：想表单数据中追加某些数据

var fm = new FormData();
 fm.append('name', 'laokiea');

set : 通过name值设置第一个对象的value值，如果不存在则新增一个

fm.append('name', 'laokiea');
 fm.set('name', 'bob');

get : 通过name值获取第一个对象的value值

fm.get('name')

我们使用该对象来上传图片：

var fileInput = document.getElementById("upload");
var formData = new FormData();
var xhr = new XMLHttpRequest();
var submit = document.getElementById("submit");

var file = fileInput.files;

for(var i = 0;i < files.length; i++) {
var file = files[i];
fm.append('files[]', file, file.name);
}

xhr.open('POST', 'upload.php', true);
xhr.send(fm);
xhr = null;

显示进度条，XMLHttpRequest有个upload属性，该属性有对应的onprogress方法，方法的事件对象有两个属性，分别是loaded和total，代表已上传的字节数和总字节数。用这两个值可以计算出进度。

// 显示进度
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
progress.value = percentComplete;
}
}

图片预览，可以使用FileReader对象，该对象有 readDataAsURL方法，可以将文件资源转换成以data：打头的URL资源。这里需要把reader对象放在循环里去实例化。

                         function preview() {
				var files = fileInput.files;
				for (var i = 0;i < files.length;i++) {
					var file = files[i];
					if(file.type != '' && /image\/\w+/.test(file.type)) {
						var reader = new FileReader();
						// 图片预览
						reader.onload = function(event) {
							var image = new Image();
							image.width = 100;
							image.src = this.result;
							document.body.appendChild(image);
						};
						reader.readAsDataURL(file);
					}
				}
			}

拖拽上传，主要实现ondragenter, ondragover, drop三个方法，分别表示，拖拽进来，拖来拖去，拖拽后，但是因为浏览器会自动打开拖拽的文件，所以要组织默认事件。

// 拖拽上传
			var holder = document.getElementById('holder');
			holder.ondragenter = function(e) {
				e.stopPropagation();
				e.preventDefault();
			}
			holder.ondragover = function(e) {
				e.stopPropagation();
				e.preventDefault();
			}
			holder.ondrop = function(e) {
				e.stopPropagation();
				e.preventDefault();
				window.files = e.dataTransfer.files;
				preview();
			}

总的代码：

<html charset='utf-8'>
<head>
	<title>upload</title>
	<style type="text/css">
		html,body{width:100%;}
		#holder {
			border: 10px dashed #000;
			width:  300px;
			height: 300px;
			min-height: 300px;
			margin: 20px auto;
		}
		#holder.hover {
			border: 10px dashed #0c0;
		}
	</style>
</head>
<body>
		<input type='file' id='upload' onchange='preview()' multiple/>
		<input type='submit' id='submit' value='ok'/>
		<progress id='progress' value=0 max=100></progress>
		<div id="holder"></div>
		<script>
			var fileInput = document.getElementById("upload");
			var formData = new FormData();
			var xhr = new XMLHttpRequest();
			var submit = document.getElementById("submit");
			var progress = document.getElementById("progress");

			function preview() {
				var files = fileInput.files;
				for (var i = 0;i < files.length;i++) {
					var file = files[i];
					if(file.type != '' && /image\/\w+/.test(file.type)) {
						var reader = new FileReader();
						// 图片预览
						reader.onload = function(event) {
							var image = new Image();
							image.width = 100;
							image.src = this.result;
							document.body.appendChild(image);
						};
						reader.readAsDataURL(file);
					}
				}
			}

			// 拖拽上传
			var holder = document.getElementById('holder');
			holder.ondragenter = function(e) {
				e.stopPropagation();
				e.preventDefault();
			}
			holder.ondragover = function(e) {
				e.stopPropagation();
				e.preventDefault();
			}
			holder.ondrop = function(e) {
				e.stopPropagation();
				e.preventDefault();
				window.files = e.dataTransfer.files;
				preview();
			}

			submit.onclick = function() {
				files = fileInput.files;
				for (var i = 0;i < files.length;i++) {
					var file = files[i];
					formData.append('files[]',file, file.name);
				}
				// xhr.onreadystatechange = function(){
				// 	console.log(this.readyState);
				// }

				xhr.open("POST","upload.php",true);

				//xhr.onload = function() {
				// if(this.status == 200) {
				// 		alert(this.response);
				// 	}
				// }

				// 显示进度
				xhr.upload.onprogress = function(event) {
					if (event.lengthComputable) {
        				var percentComplete = (event.loaded / event.total) * 100;
        				progress.value = percentComplete;
    				}
				}

				xhr.send(formData);
				xhr = null;
			}

		</script>
</body>
</html>

参考文章：

https://segmentfault.com/a/1190000006716454

http://www.helloweba.com/view-blog-192.html

https://www.qcloud.com/community/article/985614?fromSource=gwzcw.114038.114038.114038

http://www.ruanyifeng.com/blog/2012/08/file_upload.html

HTML5 – 文件上传

Leave a comment

取消回复