js ajax异步上传文件或者图片

最新推荐文章于 2016-06-23 12:23:07 发布

一航jason

最新推荐文章于 2016-06-23 12:23:07 发布

阅读量697

点赞数

分类专栏： html5/css3/JavaScript 前端开发文章标签： ajax 异步 js 文件上传 js图片上传

转载时请标明出处。https://blog.csdn.net/mhhyoucom?type=blog

本文链接：https://blog.csdn.net/mhhyoucom/article/details/38555819

版权

html5/css3/JavaScript 前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

网页制作中经常回看到上传按钮，可以实现异步上传文件，下面我们分享一款源码实现Ajax异步上传文件的方法。

思路就是隐藏一个input file的显示，然后通过调用input click事件来触发选择，然后使用ajax上传文件。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax异步文件上传</title>
<script language="JavaScript" type="text/javascript">
//ajax文件上传
function UpladFile() {
            var fileObj = document.getElementById("myfile").files[0]; // 获取文件对象
            var FileController = "/upload.php";                    // 接收上传文件的后台地址 
            // FormData 对象
            var form = new FormData();
            form.append("name", "future");                        // 可以增加表单数据
            form.append("myfile", fileObj);                           // 文件对象
            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("post", FileController, true);
            xhr.onload = function () {
                alert(xhr.responseText);
            };
            xhr.send(form);
}   

//触发文件上传事件
function openBrowse(val){ 
	var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false; 
	if(ie){ 
		document.getElementById(val).click(); 
	}else{
		var a=document.createEvent("MouseEvents");
		a.initEvent("click", true, true);  
		document.getElementById(val).dispatchEvent(a); 
	} 
}    
</script>
</head>

<body>
<input name="sc" type="button" onclick="openBrowse('myfile')" value="文件上传" />
<input style="display:none;" type="file" id="myfile" name="myfile" onchange="UpladFile()" />
</body>
</html>