对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 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   带分页的哦。

iframe 模拟ajax文件上传and formdata ajax 文件上传的更多相关文章

  1. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  2. （H5）FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

  3. 文件上传之伪Ajax篇

    iframe上传文件 接上篇:Ajax的最大特点就是无刷新(实际上是跳转),因此楼主想通过模拟Ajax的方式进行文件上传,也就是iframe上传文件 话不多说,直接上代码 HTML: <ifra ...

  4. h5图片上传简易版（FileReader+FormData+ajax）

    一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...

  5. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  6. 【转载】文件上传那些事儿，文件ajax无刷上传

    导语 正好新人导师让我看看能否把产品目前使用的FileUploader从老的组件库分离出来的,自己也查阅了相关的各种资料,对文件上传的这些事有了更进一步的了解.把这些知识点总结一下,供自己日后回顾,也 ...

  7. WebAPI通过multipart/form-data方式同时上传文件以及数据（含HttpClient上传Demo）

    简单的Demo,用于了解WebAPI如何同时接收文件及数据,同时提供HttpClient模拟如何同时上传文件和数据的Demo,下面是HttpClient上传的Demo界面 1.HttpClient部分 ...

  8. 框架基础：ajax设计方案（三）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  9. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

随机推荐

  1. 神经网络中的Softmax激活函数

    Softmax回归模型是logistic回归模型在多分类问题上的推广,适用于多分类问题中,且类别之间互斥的场合. Softmax将多个神经元的输出,映射到(0,1)区间内,可以看成是当前输出是属于各个 ...

  2. Django之 中间件

    中间件 介绍 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.如果你想修改请求,例如被传送到view中的Http ...

  3. my vim IDE 编辑器的配置

    <h4>1.自定义编辑.vimrc的快捷键</h4><blockquote>"Set mapleaderlet mapleader = ",&q ...

  4. Linux部分常用命令学习（一）

    什么是linux命令? 是一个可执行程序,就像我们所看到的位于目录/usr/bin 中的文件一样. 属于这一类的程序,可以编译成二进制文件,诸如用 C 和 C++语言写成的程序, 也可以是由脚本语言写 ...

  5. C++之内核对象进行线程同步

    用户模式下的线程同步机制提供了非常好的性能,但他们也的确存在一些局限性,而且不适用于许多应用程序,例如,对Interlocked系列函数只能对一个值进行操作,它们从来不会把线程切换到等待状态.我们可以 ...

  6. javascript:;与javascript:void(0)

    如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验 ...

  7. push()、shift()与pop()、unshift()、splice()

    1.末端的添加和移除:push()是用来在数组末端添加项,pop()在数组末端移除项: 2.前端的添加和移除:shift()在移除数组的第一个项(前端),unshift()在数组前端添加项: 3.pu ...

  8. Pod Installing openssl-ios-bitcode报错

    pod update --no-repo-update 问题:执行上面的操作之后,pod在安装ssl的时候会报错.部分报错信息如下: localhost:OpenSSLTest Later$ pod ...

  9. @Override注解在Eclipse中编译报错

    导入新工程后,发现默认用的jre是1.5版本的,在Eclipse中右击工程选择Build Path->点击Configure Build Path->Java Build Path-> ...

  10. android中asynctask的使用实例

    参考此blog写的非常的好http://www.cnblogs.com/devinzhang/archive/2012/02/13/2350070.html MainActivity.java imp ...