对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 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. Golang 编译成 DLL 文件

    golang 编译 dll 过程中需要用到 gcc,所以先安装 MinGW. windows 64 位系统应下载 MinGW 的 64 位版本: https://sourceforge.net/pro ...

  2. phpcms v9 csdn老手记录

    http://blog.csdn.net/yanhui_wei/article/category/1220735

  3. Django json处理

    转自:http://www.gowhich.com/blog/423 1, 发往浏览器端 前端:jQuery发送GET请求,并解析json数据. url = "http://example. ...

  4. 【转】简单明了区分escape、encodeURI和encodeURIComponent

    一.前言 讲这3个方法区别的文章太多了,但是大部分写的都很绕.本文试图从实践角度去讲这3个方法. 二.escape和它们不是同一类 简单来说,escape是对字符串(string)进行编码(而另外两种 ...

  5. CentOS 7 : Docker私有仓库搭建和使用

    系统环境: CentOS 7.2 192.168.0.179:docker仓库 192.168.0.60:客户端 安装并启动docker yum -y install docker systemctl ...

  6. 自定义标签库_tag

    1)最简单的标签库 1,继承Tag接口,重写doEndTag()方法,返回类型不同后面流程不一样 想要jsp的内容必须重写了setPageContent()方法 再JspWriter out = pa ...

  7. sql中case when的简单使用

    这是一个很多博客都引用的博客,作者未知,但是我第一次看到的就是这个,所以置顶这个吧, 这里有两个我刚才使用的列子: --查询同一机构的签约数和解约数: select t.sgn_acct_issr_i ...

  8. Centos7部署CephFS

    标签(空格分隔): ceph环境,ceph,cephfs cephfs部署之前准备工作: 1. 一个 clean+active 的cluster cluster部署参考:centos7下搭建ceph ...

  9. selenium中Xpath轴定位方法

    1.Xpath轴:轴可定义相对于当前节点的节点集. 使用语法:轴名称::节点名称 例://input[@data-value="SXRYNAME"]/parent::td/foll ...

  10. namespace及use的用法

    namespace(以下简称ns).在定义了一个ns之后,下面所申明的class.interface.const(不包含variable)都是在申明的ns这个“域”里面的.当引用一个申明了ns的包含文 ...