位置: 编程技术 - 正文

JavaScript中三种异步上传文件方式(javascript包含哪三大部分)

编辑:rootadmin

推荐整理分享JavaScript中三种异步上传文件方式(javascript包含哪三大部分),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript三个特点,javascript的三种数据类型,javascript三个特点,javascript的三个组成部分,javascript中三种对象,javascript中三种对象,javascript几种类型,javascript中三种对象,内容如对您有帮助,希望把文章链接给更多的朋友!

异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能。这里我提出三点有关异步文件上传的方式。

    使用第三方控件,如Flash,ActiveX等浏览器插件上传。

    使用隐藏的iframe模拟异步上传。

    使用XMLHttpRequest2来实现异步上传。

  第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度。

  第二种使用隐藏的iframe模拟异步上传。为什么在这里说的是模拟呢&#;因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使当前页面跳转,感觉就像是异步操作一样。

  先贴出代码:

  这种技术有两个关键的地方:

    1.form会指定target,提交的结果定向返回到隐藏的ifram中。(即form的target与iframe的name属性一致)。

    2.提交完成后,iframe中页面与主页面通信,通知上传结果及服务端文件信息

  如何与主页面通信呢&#;

  我们用nodejs在接收完了文件后返回了一个window.parent.主页面定义的方法,执行后可以得知文件上传完成。代码很简单:

   执行后可以打开开发人员选项,你会发现隐藏iframe中返回了服务器的一些数据。

JavaScript中三种异步上传文件方式(javascript包含哪三大部分)

   第三种使用XMLHttpRequest2来进行真正的异步上传。

  还是先贴出代码:

   代码有点多,但是通俗易懂。使用过AJAX的人都知道,XHR对象提供了一个onreadystatechange的回调方法来监听整个请求/响应过程。在XMLHttpRequest2级规范中又多了几个进度事件。有以下6个事件:

    1.loadstart: 在接收到响应数据的第一个字节时触发。

    2.progress: 在接收响应期间持续不断地触发。

    3.error: 在请求发生错误时触发。

    4.abort: 在因为调用abort()方法而终止连接时触发。

    5.load: 在接收到完整的响应数据时触发。

    6.loadend: 在通信完成或者触发error,abort,load事件后触发。

  这次我们可以解读代码:当传输事件开始后,我们便在停止传送按钮上添加点击事件,内置了abort方法可以停止传送。若不点则会正常上传直到传送完毕为止。其后台代码类似第二种方法。

  三种方法各有优劣,做个简单的小结吧。

  第三方控件交互性和可控性好,因为接近底层,其性能也是很优秀的。但是由于编写难度大通常需要自己安装插件,有时可能需要自己进行编写。

  隐藏的iframe方法我个人觉得是非常有思想的一个方法,iframe可以帮我们做很多事。这种方式具有广泛的浏览器兼容性而且不需要安装插件。但是它交互性差,上传过程不可控,而且性能也是很一般的。

  XHR2级的纯ajax上传,它必须要版本比较高一点的浏览器(ie9+)。但是它交互性特别好,可以看到上传进度并且是可控的。

  开发可按需求来采用不同方法。个人觉得这些文件上传,特别是第二种提供的是一种思想,充分的利用了某些html标签的特性,可能是我们开发人员需要多思考的地方。

JavaScript模拟push 任务:首先我定义了一个变量vararr=[0,1,2,3,4,5];我现在想模拟push方法在这个数组的5后面加东西,我们应该怎么做?给你5分钟思考,在思考之前请不要往

JavaScript模拟数组合并concat 定义和用法concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。语法arrayObject.concat(arrayX,arrayX,......

JavaScript实现图片滑动切换的代码示例分享 假设我们这里有1到5五张bmp图片,那么控制图片切换显示的核心代码可以为:scriptvari=1;varimg=newArray();img[0]="1.bmp";img[1]="2.bmp";img[2]="3.bmp";img[3]="4.bmp";img[4]="

标签: javascript包含哪三大部分

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

上一篇:JavaScript中获取纯正的undefined的方法(javascript中获取字符串长度)

下一篇:JavaScript模拟push(js模拟touch)

  • 耕地占用税税率变化历程
  • 注册资本没有全额怎么办
  • 豆制品属于农产品初加工吗
  • 利润分配未分配利润借贷方表示什么
  • 个人抬头的发票可以报销吗
  • 事业单位补发
  • 固定资产清理属于什么科目
  • 零售行业的销售员有加班费吗
  • 销售费用现金支付
  • 营改增后如何纳税
  • 固定资产认证进项在勾选平台勾吗
  • 在产品,半成品,产成品是什么意思
  • 企业工资薪酬包括哪些内容
  • 老板买增票财务怎么做账
  • 电子商业承兑汇票
  • 公司注销后还会有事吗
  • 土地增值税缴纳标准
  • 土地增值税清算后补缴税款如何帐务处理
  • 公司没成本票怎么暂估
  • 将自产产品无偿赠送税务处理
  • 发票盖错章了怎么办呢
  • 微信语音音乐怎么调
  • 生产车间购入材料会计分录
  • 退付手续费核对过期没处理怎么办
  • 最新版小企业会计准则是哪一年的
  • 跨区域涉税事项报告表报验流程
  • 公司自有房屋出租如何开票
  • vue3.0解决跨域
  • 确认应付职工薪酬是借方还是贷方
  • 苏必利尔湖位置地图
  • 搭建自己的php mvc框架
  • 分公司从事研发怎么样
  • 收到社保稳岗补贴转入营业外收入要交企业所得税吧
  • 使用二氧化碳灭火器时人应该站在什么位置
  • uni-app是干嘛的
  • php 接口规范
  • 减免残保金的操作方法
  • 小规模纳税人定义
  • 外贸出口企业的税务风险
  • 计提税费可以记入成本吗
  • 速动资产扣除应纳税所得
  • 织梦cms要钱吗
  • 零申报社保是否可以报销
  • 关联交易纳税调整期限
  • 银行对账单由谁负责
  • sql server必知必会
  • 发票税率开错了3%开成5%怎么办?
  • 发票冲红视频教程
  • 低值易耗品的管理流程
  • 政府奖励金怎么发放
  • 收到上个月退税会计分录
  • 收到银行承兑如何做账
  • 当月销售下月开票
  • 企业跨年度支出怎么计算
  • 公司车辆交强险怎么网上买
  • 捐赠出去的固定资产需要继续折旧吗
  • 税控盘服务费减免政策
  • 公司支付给实习生的报酬如何税前扣除?
  • 高速etc发票如何打印
  • 如何计提当期费用成本
  • 物流行业会计的工作内容
  • 清空mysql数据库
  • win10预览版怎么样
  • win2003启动无法显示桌面
  • windows cortana打开
  • mac通讯录怎么删除
  • rhel6安装
  • shadowbar.exe - shadowbar是什么进程 有何作用
  • win7 64位系统QQ自动退出重新登录提示您已登录不能重复登录的解决方法
  • vsftpd教程
  • [置顶] 《精神怪谈》 后续起点
  • SQLite -- 嵌入式关系型数据库
  • 如何做好设计师
  • WinForm中UnityWebPlayer屏蔽右键菜单
  • javascript简单代码
  • 原生js页面滚动怎么设置
  • jquery自定义方法
  • 外埠企业如何在经营地缴税
  • 税务局纳税服务中心
  • 黑龙江工商局网站官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设