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
现在看结果
这样也得到了 响应的临时文件路径 后续处理各位 大显神通吧哈哈。
最后再占一段 yii2 中配合 datatables表格的文件上传代码 只有ajax 带分页的哦。
