对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 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. 毕业生、程序猿转岗该如何选择Java、大数据和VR？答案在这里！

    许久不见的朋友请我吃饭,期间给我介绍他一个弟弟,说明年要毕业了,还不知道找啥工作,说有培训机构让他学VR.大数据什么的,不知道前景咋样,想咨询一下我.相信很多朋友面临毕业,都不知道该从事哪个行业,自己 ...

  2. bzoj 4448 情报传递

    Written with StackEdit. Description 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有\(n\)名情报员.每名情报员能有若干名(可能没有)下线,除\ ...

  3. bzoj 2435 道路修建

    Written with StackEdit. Description 在 \(W\) 星球上有 \(n\) 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是 ...

  4. c++ 遍历任务栏窗口

    // ConsoleApplication1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <Windows.h& ...

  5. bisect模块用于插入

    参考链接: chttp://www.cnblogs.com/skydesign/archive/2011/09/02/2163592.html水

  6. fn project faas 框架试用

    1. 预备环境 docker 17.05 docker hub account (测试可选) 2. 安装 curl -LSs https://raw.githubusercontent.com/fnp ...

  7. IT售前经验谈

    在IT界,成功的完成一个项目需要销售人员.售前人员.项目实施人员(开发人员).售后服务人员等密切协作.本文从售前技术支持人员的角度,对售前技术支持工作的过程进行了描述,根据作者在售前的经验,提出了各环 ...

  8. DataSnap侦听端口动态设置问题

    使用DataSnap做服务器,端口设置为可配置,然后在程序中动态指定: procedure TscUPower.DataModuleCreate(Sender: TObject); begin dst ...

  9. php单链表实现

    php单链表实现 <?php //单链表 class Hero{ public $no; public $name; public $nickname; public $next=null; f ...

  10. setTimeout传参

    unction test(s) { alert(s); } window.setTimeout(function(){test('str');},1000); 这样就可以了...为什么是这样呢.因为s ...