ajax与html5实现异步文件上传

最新推荐文章于 2023-09-27 11:55:43 发布

aozeahj

最新推荐文章于 2023-09-27 11:55:43 发布

阅读量2.6k

点赞数 1

分类专栏： ajax技术

本文链接：https://blog.csdn.net/aozeahj/article/details/53008737

版权

ajax技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ajax与html5实现异步文件上传

在之前的两篇文章中，分别介绍了XMLHttpRequest对象和iframe伪异步文件上传。在此就不再介绍介绍XMLHttpRequest对象了。之前说，单凭ajax是无法实现文件上传的，原因是js不能操作主机的硬盘来获取文件。但是随着个浏览器商家逐步支持HTML5(实现了对ajax异步上传文件的支持)，ajax异步文件上传变得可能。

ajax异步上传思路

1.在html5中为文件上传的标签<input type='file' name='' /> 的dom添加一个files文件列表对象，通过它我们可以在js中获取文件的

信息和二进制资源。

2.在XMLHttpRequest的2版中添加了 FormData对象，来加载表单提交键值对。也可以用来加载文件资源。

3.ajax异步上传文件，并且通过自身异步回调函数来实现后台上传文件的提示信息显示和反馈。

前台文件upload.html全部代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
    <title>ajax异步文件上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script type="text/javascript">
     function createXHR()
	 {
	    var xhr=null;
	   if(window.XMLHttpRequest)  //要是支持XMLHttpRequest的则采用XMLHttpRequest生成对象
	      xhr=new XMLHttpRequest();
	   else if(window.ActiveXobject)//要是支持win的ActiveXobject则采用ActiveXobject生成对象。
	     xhr=new ActiveXobject('Microsoft.XMLHTTP');
	    return xhr;
	 }
	 
	 function ajax_upload()
	 {
	   var xhr=createXHR();
	   var formData=new FormData();
	   var file=document.getElementsByTagName('input')[0].files[0];//获取文件列表中的第一个文件，html5中支持多个文件上传
	   var info='文件名:'+file.name+' 文件类型:'+file.type+' 文件大小:'+file.size;//获取文件的信息
	   var showInfo=document.getElementById('showinfo');
	   showInfo.innerHTML=info;
	   formData.append('pic',file);//加载图片文件
	   xhr.open('POST','./move_file.php',true);
	   xhr.send(formData);
	   xhr.onreadystatechange=function(){
	     if( this.readyState==4 && this.status==200)
		 {
		    showInfo.innerHTML=showInfo.innerHTML+'<br />'+this.responseText;//将后台提示信息放到指定div中显示
		 }
	    
	   }
	 }
    </script>
</head>
<body>
	 <input type='file' name='pic' />
	 <input type='button' value='提交'οnclick='ajax_upload();'/>
	 <div id='showinfo'></div>
</body>

后台文件move_file.php全部代码如下：

<?php
if(empty($_FILES))die('上传为空文件');
if($_FILES['pic']['error']!=0)die('文件上传出错');
move_uploaded_file($_FILES['pic']['tmp_name'],'./'.$_FILES['pic']['name']);
echo '文件上传成功！';
?>

截图如下：

aozeahj

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
ajax与html5实现异步文件上传

ajax与html5实现异步文件上传在之前的两篇文章中，分别介绍了XMLHttpRequest对象和iframe伪异步文件上传。在此就不再介绍介绍XMLHttpRequest对象了。之前说，单凭ajax是无法实现文件上传的，原因是js不能操作主机的硬盘来获取文件。但是随着个浏览器商家逐步支持HTML5(实现了对ajax异步上传文件的支持)，ajax异步文件上传变得可能。
复制链接

扫一扫