位置: 编程技术 - 正文

JavaScript File API文件上传预览

编辑:rootadmin

推荐整理分享JavaScript File API文件上传预览,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

  对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件。实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。再获取服务器返回的地址,然后做预览。

  但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览。在网络比较慢的情况下,这样真的很折腾。

  所以我们某些时候需要先预览再上传到服务器,特别是一些有剪切功能的需求,例如新浪微博的头像更换。但是目前能做的只能是借助插件开发或者使用flash,由于不同浏览器的技术实现不尽相同,为了让程序能够支持多浏览器,我们的程序就会变得十分复杂而难于维护。幸好现在有了File API。

  通过监听change事件我们可得知用户选择的文件,并且添加了一个files集合,集合中将包含file对象,每个file对象对应着一个文件。并且都有以下只读属性name,size,type,lastModifiedDate.

以<input type="file" name="file">为例,监控onchange事打印它的file对象:

  

  由此我们可得知用户选取的文件格式,文件名以及文件大小等等的一些信息。因此我们很容易就能为所选取的文件作验证判断是否符合我们定的一些要求。

除此之外File API还提供了FileReader类型读取文件中的数据。

FileReader类型实现的事一种异步文件读取机制,类似于XMLHttpRequest,但是它读的是文件系统而不是远程服务器。并且提供了几种读取方法:

readAsText(file,encoding):以纯文本形式读取文件,将读取到的文本保存在result属性中,第二个参数用于指定编码类型,可选。 readAsDataURL(file):读取文件以数据URL的形式保存在result属性中。 readAsBinaryString(file):读取文件并将一个字符串保存在result属性中。 readAsArrayBuffer(file):读取文件并将一个包含文件人容的ArrayBuffer保存在result属性中JavaScript File API文件上传预览

通过以上方法分别读取同一张本地图片,并且把保存在result属性中的信息打印出来对比如下:

readAsText(file,encoding):

readAsDataURL(file):

  通过以上对比我们发现这些读取文件的方法为灵活的处理文件数据提供了极大的方便。例如读取图像文件并且保存为数据url,可以做上传前的预览功能。

  由于读取的过程是异步的,所以FileReader里面有几个事件分别处理不同的情况:progress(是否读取了新数据)、erro(是否发生了错误)、load(是否已经读完了整个文件)。

  由于种种原因无法读取文件就会触发error事件,触发error事件的时会有一个属性code(错误码)保存在FileReader的error属性里面的一个对象中。

使用FileReader做上传预览的例子:

HTML:

JavaScript:

效果以及返回的图片URL:

标签: JavaScript File API文件上传预览

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

上一篇:javascript绘制漂亮的心型线效果完整实例(javascript如何绘制曲线)

下一篇:详解Webwork中Action 调用的方法(activate webstorm)

  • 文化传媒公司的税种及税率
  • 小规模纳税人能开专票吗
  • 房产税计税依据是什么
  • 未抵扣的进项发票是什么意思
  • 记账凭证如何填写明细科目
  • 从合伙企业分回的经营所得 合伙企业 个人所得税
  • 清算报告与清算方案区别
  • 房产税当月计提额怎么算
  • 签证费怎么支付
  • 固定资产发票未到怎么提折旧
  • 食堂买的固定资产怎么帐务处理
  • 工程完成投资入什么科目核算与怎么写其会计分录?
  • 采购办公用品计入什么科目
  • 以前年度损益是所有者权益吗
  • 经营损失计入哪类费用
  • 营改增租赁服务有哪些
  • 税控盘维护费抵减分录
  • 付款申请需要附什么依据
  • 固定资产折旧率是多少
  • 房地产开发企业资质证书
  • mac安装软件提示需要更高版本
  • mac如何连接2个airpods
  • linux监控系统命令
  • linux文件权限控制
  • 向分公司借款
  • ubuntu20.04安装make
  • Kamikōchi, Nagano Prefecture, Japan (© sadao/Shutterstock)
  • 三防手机厂商
  • vue表单验证数字
  • 海关进口增值税怎么认证抵扣
  • 小规模纳税人上月发票开错了怎么办
  • 实现视图
  • php目录结构
  • 外贸公司美金账户维护费用
  • 进口货物交哪些税费
  • 零申报有哪些
  • js数组 filter
  • Python psd-tools如何转换文件
  • 高新企业奖励怎么领取
  • 金融商品转让和贷款服务
  • sql server 2008登录服务器名称
  • 建筑公司收到劳务发票会计分录
  • 实收资本与资本公积之和小于实收资本
  • 发票收款人和复核人在哪儿政
  • 短期借款有哪几种类型
  • 融资租赁业务利润怎么算
  • 应交税金在贷方是什么意思
  • 建筑企业怎么结算成本
  • 进口形式发票能证明商品是进口的吗
  • 业务招待费可以开专票抵扣吗
  • 弥补亏损后怎么做账
  • 离职补偿金要交个税吗
  • 会计报表的主要构成内容
  • mysql Access denied for user ‘root’@’localhost’ (using password: YES)解决方法
  • Windows下System Volume Information文件夹是干嘛用的?
  • Windows Server 2008虚拟技术说明
  • ubuntu启动菜单 哪个键
  • 怎么调win7
  • Win7 64位系统声卡重装过程中出现失败的解决方法
  • xp系统的电脑无法启动
  • 如何设置滑屏方式
  • win7或win8、win8.1系统下安装ubuntu实现双系统图文教程
  • win7的收藏夹在哪里
  • msswchx.exe - msswchx进程是什么文件 有何作用
  • win8.1黑屏
  • win10 系统软件
  • 239mbps是多少兆网速
  • Android屏幕外侧滑条
  • 微信小程序使用webview
  • javascript教程chm
  • 怎么使用vue和axios连接后端
  • shell脚本-lt
  • linux sed awk区别
  • shell常用命令及示例
  • 字符串中指定字符变换
  • python中判断语句怎么写
  • 安卓系统手机图片文件夹在哪里
  • 粮食购销企业税收服务
  • 四川灵活就业医保每月返多少钱
  • 湖南社保费申报测算管理系统登录不了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设