对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 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. 列表（增删改查）元组tupe

    增加:有三种,append:在后面添加.Insert按照索引添加,expend:迭代着添加.#append li = ['lishi','alex','lili'] li.append(') prin ...

  2. tslib: Selected device is not a touchscreen (must support ABS_X and ABS_Y events)

    /************************************************************************************ * tslib: Selec ...

  3. （四）js数组方法一

    ES5数组方法: Array.prototype.filter()   对数组元素进行过滤 三个参数:元素值,下标,原数组 返回:过滤后符合条件的数组,不会改变原数组 let arr = [2,4,6 ...

  4. [qt][问题记录] 无法定位程序输入点 _ZdaPvj 于动态链接库 libstdc++-6.dll

    无法定位程序输入点 _ZdaPvj 于动态链接库 libstdc++-6.dll 该问题是没有打包库的问题,之所以出现这个问题的是直接用系统自带的命令行使用qt的windeployqt命令导致提供的库 ...

  5. 关于15桥梁课程1&2的笔记以及待做事项的梳理

    1.指针所占用的空间是固定的 2.void *malloc(sizeof(int)); (这玩意耗时间,老师说通过内存池解决) free(p);free(p);   两次free()报错,正确的做法: ...

  6. The Pragmatic Programmer 摘要评注

    这本书与其说是一本编程书,倒不如说是一本教做人的书.很多时候项目的进行依赖于技术以外的因素,比如说沟通,人的品格,人际,处理问题的方法.在未来的一度日子会陆续添加个人认为值得学习的内容.

  7. 使用Oracle 11g新特性 Active Database Duplication 搭建Dataguard环境

    Duplication Database 介绍 Duplicate database可以按照用途分为2种: duplicate database(复制出一个数据库) duplicate standby ...

  8. 基功太差，怨不得天，得下苦功——WAP面试，正式招聘号角响起

    WAP面试,直接考察coding能力. 面试官是一个日本先生.人超级Nice.一直朝我微笑. 简短的self-introdution后,就让写代码了. (欧巴桑昨天面的,回去后就把题目告诉我们了,我昨 ...

  9. ehchache和redis

    Ehcache 在java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS中取出来的高花费.高延迟采取的一种缓存方案.正因为Ehcache具有健壮性(基于java开发).被认证(具有apa ...

  10. LeetCode Valid Parenthesis String

    原题链接在这里:https://leetcode.com/problems/valid-parenthesis-string/description/ 题目: Given a string conta ...