iframe 模拟ajax文件上传and formdata ajax 文件上传

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

对于文件上传有好多种方式,一直想总结文件上传的方法今天就来写下 iframe 的文件上传的代码本人语言表达能里有限，不多说了直接上代码。

首先看总体页面。

总共就三个文件。实际上也就是index.html 中的主要代码

index.html

<html>
<head>
<meta charset="UTF-8">
<title>iframe无刷新上传文件</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<form action="./index.php" method="post" enctype="multipart/form-data" target="form-target" > //这里的的target的值必须和iframe中的name 一样。
<input type="file" name="file" id="file">
<input type="submit" value="提交">
</form>
//在项目中 ifream 大家设置下样式使其隐藏就行。我这里为了调试方便而就不隐藏了。
<iframe name="form-target" ></iframe>
</body>
</html>

这个页面中有2个需要注意

① form 表单中必须有enctype="multipart/form-data" 这个属性意思是将文件转换成文件流供后段接受。

② form表单中的target的值必须和iframe 中的name的只一样。这是吧表单提交的刷新页面转嫁到 iframe 中去。

index.php

看结果

此时临时文件都得到了至于后续处理就是移动临时文件（tmp_name）各位在框架中也有许多的封装小弟就不在这里献丑了。。如果有什么bug和指教请大家积极评论谢啦。后续补充

*************接下来请看 HTML5 formdata 的上传方式。*********

先看代码。

index.html

<html>
<head>
<meta charset="UTF-8">
<title>formData上传文件</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<form id="uploadForm" enctype="multipart/form-data" >
<input type="file" name="file" id="file">
<input type="button" value="提交" id="name_button">
</form></body>
<script type="text/javascript">$("#name_button").on('click',function(){ var formData = new FormData($( "#uploadForm" ));
formData.append('file', $('input[type=file]')[0].files[0]);
//当然这里你也可以追加你自己的值比如

formData.append('ceshi', '123456');$.ajax({

url: './index.php' ,
type: 'POST',
data: formData, cache: false, //文件不需要缓存
contentType: false, //这个一定要有 processData设置为false。因为data值是FormData对象，不需要对数据做处理。

processData: false, //这个一定要有因为 form表单构造的是formdata对象并且已经设置了属性enctype＝"multipart/form-data"
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
}); })
</script>
</html>

index.php