位置: 编程技术 - 正文

谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法(iframe例子)

编辑:rootadmin

推荐整理分享谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法(iframe例子),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:谈谈基于产品的供应链设计,谈谈基于数学核心素养发展的小学数学作业设计策略,谈谈基于网络的合作化教学策略包括哪些内容,谈谈基于波特竞争五因素理论的海尔的竞争战略,谈谈基于信息系统的组织战略如何制定,谈谈基于波特竞争五因素理论的海尔的竞争战略,谈谈基于波特竞争五因素理论的海尔的竞争战略,谈谈基于波特竞争五因素理论的海尔的竞争战略,内容如对您有帮助,希望把文章链接给更多的朋友!

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向。以一个简单的demo做说明:

html如下所示,请求的路径action为"upload",其它的不做任何处理:

服务端(node)response直接返回: "Recieved form data",演示如下:

可以看到默认情况下,form请求upload的同时重定向到upload。但是很多情况下是希望form请求像ajax一样,不会重定向或者刷新页面。像上面的场景,当上传完成之后,将用户选择的头像显示在当前页面。

解决办法第一种是使用html5的FormData,将form里面的数据封装到FormData对象里,然后再以POST的方式send出去。如下面代码所示,对提交按钮的单击事件做一个响应,代码第6行获取到form的DOM对象,然后第8行构造一个FormData的实例,第行,将form数据发送出去。

上传成功后,服务将返回图片的访问地址,补充行对请求成功的处理:在submit按钮的上方位置显示上传的图片:

示例:

如果使用jQuery,可以把formData作为ajax的data参数,同时设置contentType: false和processData: false,告诉jQuery不要去处理请求头和发送的数据。

看起来这种提交方式跟ajax一样,但是其实并不是完全一样,form提交的数据格式有三种,如果要上传文件则必须为multipart/form-data,所以上面的form提交请求里的http的头信息里面的Content-Type为multipart/form-data,而普通的ajax提交为application/json。form提交完整的Content-Type如下:

"content-type":"multipart/form-data; boundary=------WebKitFormBoundaryYOE7pWLqdFYSeBFj"

除了multipart/form-data之外,还指定了boundary,这个boundary的作用是用来区分不同的字段。由于FormData对象是不透明的,调用JSON.stringify将会返回一个空的对象{},同时FormData只提供append方法,所以无法得到FormData实际上传的内容,但是可以通过分析工具或者服务收到的数据进行查看。在上面如果上传一个文本文件,那么服务收到的POST数据的原始格式是这样的:

------WebKitFormBoundaryYOE7pWLqdFYSeBFj

Content-Disposition: form-data; name="user"

abc

------WebKitFormBoundaryYOE7pWLqdFYSeBFj

Content-Disposition: form-data; name="file"; filename="test.txt"Content-Type: text/plain

这是一个文本文件的内容。

------WebKitFormBoundaryYOE7pWLqdFYSeBFj--

从上面服务收到的数据看出FormData提交的格式,每个字段以boundary隔开,最后以--结束。而ajax请求,send出去的数据格式是自定义的,一般都是以key=value中间用&连接:

谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法(iframe例子)

服务就会收到和send发出去的字符串一模一样的内容,然后再作参数解析,所以就得统一参数的格式:

user=abc&file=这是一个文本文件的内容

从这里可以看出POST本质上并不比GET安全,POST只是没有将数据放在网址传送而已。

考虑到FormData到了IE才支持,如果要支持较低版本的IE,那么可以借助iframe。

文中一开始就说,默认的form提交会使页面重定向,而重定向的规则在target中指定,可以和a标签一样指定为"_blank",在新窗口中打开;还可以指定为一个iframe,在该iframe中打开。所以可以弄一个隐藏的iframe,将form的target指向这个iframe,当form请求完成时,返回的数据就会由这个iframe显示,正如上面在新页面显示的:"Recieved form data"。请求完成后,iframe加载完成,触发load事件,在load事件的处理函数里,获取该iframe的内容,从而拿到服务返回的数据了!拿到后再把iframe删掉。

在提交按钮的响应函数里,首先创建一个iframe,设置iframe为不可见,然后再添加到文档里:

改变form的target为iframe的name值:

然后再响应iframe的load事件:

第二种办法到这里就基本可以了,但是如果看邮箱或者QQ邮箱上传文件的方式,会发现和上面的两种方法都不太一样。用httpfox抓取请求的数据,会发现上传的内容的格式并不是上面说的用boundary隔开,而是直接把文件的内容POST出去了,而文件名、文件大小等相关信息放在了文件的头部。如邮箱:

POST Data:

this is a text

Headers:

Mail-Upload-name: content.txt Mail-Upload-size:

可以推测它们应该是直接读取了input文件的内容,然后直接POST出去了。要实现这样的功能,可以借助FileReader,读取input文件的内容,再保留二进制的格式发送出去:

代码第行执行读文件,读取完毕后触发第6行的load响应函数,第7行以二进制文本形式发送出去。由于sendAsBinary的支持性不是很好,可以自行实现一个:

代码的关键在于第6行,将字符串转成8位无符号整型,还原二进制文件的内容。在执行了fr.readAsBinaryString之后,二进制文件的内容将会以utf-8的编码以字符串形式存放到result,上面的第6行代码将每个unicode编码转成整型(&0xff或者parseInt),存放到一个8位无符号整型数组里面,第8行把这个数组发送出去。如果直接send,而不是sendAsBinary,服务收到的数据将无法正常还原成原本的文件。

上面的实现需要考虑文件太大,需分段上传的问题。

关于FileReader的支持性,IE以上支持,IE9有另外一套File API。

文章讨论了3种办法实现无刷新上传文件,分别是使用iframe、FormData和FileReader,支持性最好是的iframe,但是从体验的效果来看FormData和FileReader更好,因为这两者不用生成一个无用的DOM再删除,其中FormData最简单,而FileReader更加灵活。

下面给大家介绍iframe无刷新上传文件

<!--和一般的<form>标签相比多了一个target属性罢了,用于指定标签页在哪里打开以及提交数据。

如果没有设置该属性,就会像平常一样在本页重定向打开action中的url。

而如果设置为iframe的name值,即"upload"的话,就会在该iframe内打开,因为CSS设置为隐藏,因而不会有任何动静。若将display:none去掉,还会看到服务器的返回信息。

全面解析Bootstrap图片轮播效果 一.结构分析一个轮播图片主要包括三个部分:轮播的图片轮播图片的计数器轮播图片的控制器第一步:设计轮播图片的容器。在Bootstrap框架中采用carouse

学习JavaScript设计模式(代理模式) 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创

基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统 废话不多说了,直接给大家贴js代码了,代码附有注释,感兴趣的朋友一起学习吧。/***Author:laixiangran.*Createdbylaixiangranon//.*检测访问网页的浏览器

标签: iframe例子

本文链接地址:https://www.jiuchutong.com/biancheng/387084.html 转载请保留说明!

上一篇:解决JavaScript数字精度丢失问题的方法(javascript+)

下一篇:全面解析Bootstrap图片轮播效果(全面解析少女时代关系)

  • 应交税费转结哪里去
  • 企业所得税视同销售的会计处理是?
  • 车辆购置税计入固定资产入账价值吗
  • 纳税人识别号是什么哪里可以查到
  • 其他权益工具投资借贷方向
  • 个人所得税累计扣除标准
  • 金税四期对个人所得税的影响
  • 罚款可以直接在公安局缴纳吗
  • 材料采购暂估入账
  • 收入与支出怎么算利润率
  • 企业收到税收返还会计分录
  • 普通发票申请表怎么填写
  • 什么税不计入税金及附加科目
  • 工业企业的三个阶段
  • 资本公积是啥
  • 关于油票的纳税人识别号
  • 物流公司开票税率
  • 国家税务总局公告2012年第57号
  • 股息红利是否交个人所得税
  • 外汇网上申报操作流程图
  • 对公直接转私人卡会怎么样
  • 电子发票会计怎么记账
  • 固定资产转移是什么意思
  • 增值税普通发票和电子普通发票的区别
  • iphone微信透明壁纸怎么设置
  • 应收账款贷方余额怎么在资产负债表中填列
  • 暂存款账务处理
  • 小规模纳税人销售货物税率是多少
  • 二手车交易税咋算
  • 人工单位怎么写
  • 固定资产原值,净值,价值的区别
  • ISBMgr.exe - ISBMgr是什么进程 有什么作用
  • 路由器怎么设置2.4g网络
  • 查看chrome浏览器内核版本
  • vue实战技巧
  • 开发商延期交房违法吗
  • 怎么分析一个企业的营销策略
  • javascript零基础
  • 前端环境部署到服务器开发环境
  • js数组菜鸟教程
  • 工会经费计算公式的例子
  • 税款已缴纳可以作废申报吗
  • 理财产品利息计算方法
  • 结转成本费用
  • uniapp组件使用
  • 调转会计证需要什么资料
  • sql server2008中删除表中记录的命令
  • sql优化的方法及思路
  • 企业注销未抵扣完进项税怎么处理
  • 公司购买劳保用品可以抵扣吗
  • 在软件中的操作有哪些
  • 企业迁移税务如何办理
  • 出口样品视同销售如何做会计处理?
  • 收到发票未抵扣,收票方也可以开红字信息表吗?
  • 付别人押金的会计分录
  • 什么是债券转让价格与发行价格
  • 车船税怎么抵扣进项
  • 总产值的计算方法是什么
  • 公司购入二手车没有发票怎么入账
  • mysql联合索引生效原则
  • windows98的开始菜单包括了
  • 磁盘碎片 win7
  • mac怎么用浏览器
  • 如何解决cpu超频问题
  • macbook桌面2
  • mac我的所有文件 删除
  • linux就该这么
  • windows8.1版本区别
  • cocos2dx 3.17
  • perl语句
  • [置顶]bilinovel
  • js面向对象的几种方式
  • javascrip语言
  • 税务系统运维应急预案范文
  • 苏州峰谷电怎么申请
  • 医保银行代扣是什么意思
  • 怎样纳税申报和缴纳
  • 北京大兴国税局领导班子
  • 仓储用地和物流用地划分
  • 临时税务登记纳税人
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设