对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 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. 软件测试 Record

    fxcopnunit软件质量 EDW 数据仓库ETL KPI 敏捷 测试计划 单元测试 集成测试 系统测试 对测试结果 阶段性 分析 总结 测试结果报告 环境问题:软硬件用户有问题,我们这边没有有效问 ...

  2. Cisco DHCP 配置要点

    实验拓扑图:IOU5/6/7模拟主机 IOU1为DHCP服务器 IOU2为DHCP中继器 IOU3/4为局域网内的交换机 在IOU1中配置DHCP配置 IOU2作为DHCP中继,在E0/0.10和E0 ...

  3. 大白话讲解如何给github上项目贡献代码

    本文献给对git很迷茫的新手,注意是新手,但至少会点基本操作,有点基本概念的新手,我不会从怎么用github和git是什么开始讲的.如果作为新手你看书又看不进去,原理又太复杂,又没有直接了当告诉我们怎 ...

  4. java编写创建数据库和表的程序

    本文示例可见一斑了,主要是通过Java对SQL语句进行操作,和普通的增删改查的原理是一样的: import java.sql.*; public class Test { public static ...

  5. L3-008 喊山 （30 分）

    喊山,是人双手围在嘴边成喇叭状,对着远方高山发出“喂—喂喂—喂喂喂……”的呼唤.呼唤声通过空气的传递,回荡于深谷之间,传送到人们耳中,发出约定俗成的“讯号”,达到声讯传递交流的目的.原来它是彝族先民用 ...

  6. LG2120 [ZJOI2007]仓库建设

    题意 L公司有N个工厂,由高到底分布在一座山上. 工厂1在山顶,工厂N在山脚. 由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在露天,以节省费用. 突然有一天,L公司的总裁L先生接到 ...

  7. call()方法和apply()方法用法总结

    1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖 ...

  8. egg 使用手记（一）

    1. 文件加载规则 引用官方的说法: 框架在加载文件时会进行转换,因为文件命名风格和 API 风格存在差异.我们推荐文件使用下划线,而 API 使用驼峰.比如 app/service/user_inf ...

  9. Python学习系列（二）(基础知识)

    Python基础语法 Python学习系列(一)(基础入门) 对于任何一门语言的学习,学语法是最枯燥无味的,但又不得不学,基础概念较繁琐,本文将不多涉及概念解释,用例子进行相关解析,适当与C语言对比, ...

  10. mysql复制(高可用架构方案的基础)

    mysql复制:把一个数据库实例上所有改变复制到另外一个数据库库服务器实例的过程特点:1.没有改变就无所谓复制 ;改变是复制的根本与数据源2.所有的改变:是指可以复制全部改变,也可以复制部分改变 可以 ...