ajax文件上传

胡西风_foxww

已于 2023-03-25 00:03:58 修改

阅读量535

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签：文件上传二进制 blob ajax

于 2019-12-15 17:43:10 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/my_study_everyday/article/details/103551112

本文详细介绍了如何使用HTML5的Ajax技术实现文件上传，包括iframe模拟Ajax文件上传效果，使用formData发送数据，将二进制对象转换为浏览器资源，通过form表单发送图片到服务器，以及如何展示上传进度条。此外，还讨论了HTML5的大文件切割上传策略，利用Blob的slice方法分块上传文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章首发于qdgithub.com阅读体验更佳

iframe模拟Ajax文件上传效果

分析:

1:捕捉表单提交的动作

2:创建一个iframe

3:把表单的 target修改指向该iframe

4:去掉这个iframe

<div id="progress"></div>
<form action="up.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxup();">
	<input type="file" name="pic">
	<input type="submit" value="提交">
</form>
<script>
	function ajaxup() {
     
     
		var ifname = 'up' + Math.random();
		$('<iframe name="' + ifname + '" width="0" height="0" frameBorder="0"></iframe>').appendTo($('body'));
		$('form:first').attr('target', ifname);
		$('#progress').html('<img src="./loading.gif" />');
	}
</script>

sleep(3);

if(empty($_FILES)) {
    exit('no file');
}

$msg = $_FILES['pic']['error']==0 ? 'succ' : 'fail';

echo "<script>parent.document.getElementById('progress').innerHTML = '$msg'</script>";

formData发送数据

formData "表单数据"对象,这是在html5中新增的一个Api。
他能以表单对象做参数,自动的把表单的数据打包.
当ajax发送数据时,发送些formData,达到发送表单内各数据项的目的。

// 02-testpost.php
print_r($_POST);

<form id="tform">
	用户名:<input type="text" name="username"><br>
	年 龄:<input type="text" name="age"><br>
	email:<input type="text" name="email"><br>
	性 别:<input type="text" name="gender"><br>
	<input type="button" value="ajax发送" onclick="send();">
</form>
<div id="debug"></div>
<script type="text/javascript">
	function send() {
     
     
		var fm = document.getElementById('tform');
		var fd = new FormData(fm);

		var xhr =