ajax无刷新上传

最新推荐文章于 2018-04-03 14:47:36 发布

原创最新推荐文章于 2018-04-03 14:47:36 发布 · 390 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

javascript 专栏收录该内容

6 篇文章

订阅专栏

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>无标题文档</title>
	<style>
	#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}
	#div2 {width: 0; height: 30px; background: #CCC;}
	#div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}
	</style>
	<script>
	window.onload = function() {

	var oBtn = document.getElementById('btn');
	var oMyFile = document.getElementById('myFile');
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');

	oBtn.onclick = function() {

	//alert(oMyFile.value); //获取到的是file控件的value值，这个内容是显示给你看的文字，不是我们选择的文件

	//oMyFile.files file控件中选择的文件列表对象
	//alert(oMyFile.files);

	//我们是要通过ajax把oMyFile.files[0]数据发送给后端

	/*for (var attr in oMyFile.files[0]) {
	console.log( attr + ' : ' + oMyFile.files[0][attr] );
	}*/

	var xhr = new XMLHttpRequest();

	//
	xhr.onload = function() {
	//alert(1);
	//var d = JSON.parse(this.responseText);

	//alert(d.msg + ' : ' + d.url);

	alert('OK,上传完成');
	}

	//alert(xhr.upload);
	var oUpload = xhr.upload;
	//alert(oUpload);
	oUpload.onprogress = function(ev) {
	console.log(ev.total + ' : ' + ev.loaded);

	var iScale = ev.loaded / ev.total;

	oDiv2.style.width = 300 * iScale + 'px';
	oDiv3.innerHTML = iScale * 100 + '%';

	}

	xhr.open('post', 'post_file.php', true);
	xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');

	var oFormData = new FormData(); //通过FormData来构建提交数据
	oFormData.append('file', oMyFile.files[0]);
	xhr.send(oFormData);


	}

	}
	</script>
	</head>

	<body>
	<input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
	<div id="div1">
	<div id="div2"></div>
	<div id="div3">0%</div>
	</div>

	</body>
	</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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