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