欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站建设News

前端本地文件操作与上传

发布时间:2017:12:04 14:00:20 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1500个文字,预计阅读时间4分钟
导语
A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。

  前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:

  通过input type=”file” 选择本地文件

  通过拖拽的方式把文件拖过来

  在编辑框里面复制粘贴

推荐阅读:前端开发者该如何设置数据库

  第一种是最常用的手段,通常还会自定义一个按钮,然后盖在它上面,因为type=”file”的input不好改变样式。如下代码写一个选择控件,并放在form里面:

  <form>

  <input type="file" id="file-input" name="fileContent">

  </form>

  然后就可以用FormData获取整个表单的内容:

  $("#file-input").on("change", function() {

  console.log(`file name is ${this.value}`);

  let formData = new FormData(this.form);

  formData.append("fileName", this.value);

  console.log(formData);

  });

  把input的value和formData打印出来是这样的:

  

前端本地文件操作与上传

 

  可以看到文件的路径是一个假的路径,也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的Objet,但并不是说它的内容是空的,只是它对前端开发人员是透明的,无法查看、修改、删除里面的内容,只能append添加字段。

  FormData无法得到文件的内容,而使用FileReader可以读取整个文件的内容。用户选择文件之后,input.files就可以得到用户选中的文件,如下代码:

  $("#file-input").on("change", function() {

  let fileReader = new FileReader(),

  fileType = this.files[0].type;

  fileReader.onload = function() {

  if (/^image/.test(fileType)) {

  // 读取结果在fileReader.result里面

  $(`<img src="${this.result}">`).appendTo("body");

  }

  }

  // 打印原始File对象

  console.log(this.files[0]);

  // base64方式读取

  fileReader.readAsDataURL(this.files[0]);

  });

  把原始的File对象打印出来是这样的:

  

前端本地文件操作与上传

 

  它是一个window.File的实例,包含了文件的修改时间、文件名、文件的大小、文件的mime类型等。如果需要限制上传文件的大小就可以通过判断size属性有没有超,单位是字节,而要判断是否为图片文件就可以通过type类型是否以image开头。通过判断文件名的后缀可能会不准,而通过这种判断会比较准。上面的代码使用了一个正则判断,如果是一张图片的话就把它赋值给img的src,并添加到dom里面,但其实这段代码有点问题,就是web不是所有的图片都能通过img标签展示出来,通常是jpg/png/gif这三种,所以你应该需要再判断一下图片格式,如可以把判断改成:

  /^image\/[jpeg|png|gif]/.test(this.type)

  然后实例化一个FileReader,调它的readAsDataURL并把File对象传给它,监听它的onload事件,load完读取的结果就在它的result属性里了。它是一个base64格式的,可直接赋值给一个img的src.

  使用FileReader除了可读取为base64之外,还能读取为以下格式:

  // 按base64的方式读取,结果是base64,任何文件都可转成base64的形式

  fileReader.readAsDataURL(this.files[0]);

  // 以二进制字符串方式读取,结果是二进制内容的utf-8形式,已被废弃了

  fileReader.readAsBinaryString(this.files[0]);

  // 以原始二进制方式读取,读取结果可直接转成整数数组

  fileReader.readAsArrayBuffer(this.files[0]);

  其它的主要是能读取为ArrayBuffer,它是一个原始二进制格式的结果。把ArrayBuffer打印出来是这样的:

  

前端本地文件操作与上传

 

  可以看到,它对前端开发人员也是透明的,不能够直接读取里面的内容,但可以通过ArrayBuffer.length得到长度,还能转成整型数组,就能知道文件的原始二进制内容了:

  let buffer = this.result;

  // 依次每字节8位读取,放到一个整数数组

  let view = new Uint8Array(buffer);

  console.log(view);

  如果是通过第二种拖拽的方式,应该怎么读取文件呢?如下html(样式略):

  <div class="img-container">

  drop your image here

  </div>

  这将在页面显示一个框:

  

前端本地文件操作与上传

 

  然后监听它的拖拽事件:

  $(".img-container").on("dragover", function (event) {

  event.preventDefault();

  })

  .on("drop", function(event) {

  event.preventDefault();

  // 数据在event的dataTransfer对象里

  let file = event.originalEvent.dataTransfer.files[0];

  // 然后就可以使用FileReader进行操作

  fileReader.readAsDataURL(file);

  // 或者是添加到一个FormData

  let formData = new FormData();

  formData.append("fileContent", file);

  })

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:浅析Web端设计规范

下一篇:HTTPS连接过程以及中间人攻击劫持

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信