最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】JS中的File对象有哪些属性以及如何获得file的data数据

JS crifan 8070浏览 0评论

折腾:

【记录】尝试去用H5实现弹出选择相机还是相册的方式实现图片文件上传

期间,在参考:

react-weui中的uploader.js的代码时,去看看如何获得上传的文件:

需要去搞清楚,js中的file对象,有哪些属性,以及如何获得对应的data数据

然后自己通过:

                    <input
                      id="uploaderCustomInput"
                      class="weui-uploader__input"
                      type="file"
                      accept="image/*"
                      multiple=""
                      onChange={this.handleFileChange} />
                  </div>
  handleFileChange(e) {
    console.log(`handleFileChange:`);
    console.log(e);
    console.log(e.target);
    console.log(e.target.files);
}

也打印出来File的一些基本信息了:

  1. FileList {0Filelength1}
    1. length:1
    2. 0:File
      1. lastModified:1501579781000
      2. lastModifiedDate:Tue Aug 01 2017 17:29:41 GMT+0800 (CST)
      3. name:"cow_4.jpg"
      4. size:271136
      5. type:"image/jpeg"
      6. webkitRelativePath:""
      7. __proto__:File
    3. __proto__:FileList

但是需要知道其他更多的,关于js中的file的信息

html file object in javascript

File – Web APIs | MDN

以为file中的data数据是来自blob中:

Blob – Web APIs | MDN

结果好像不是,至少没有data属性。

Using files from web applications | MDN

Example: Showing thumbnails of user-selected images

这部分值得参考。

How to instantiate a File object in JavaScript? – Stack Overflow

【总结】

js中的file的对象的属性有:

Properties
The File interface also inherits properties from the Blob interface:
File.lastModified Read only
Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).
File.lastModifiedDate Read only  
Returns the last modified Date of the file referenced by the File object.
File.name Read only
Returns the name of the file referenced by the File object.
File.size Read only
Returns the size of the file.
File.webkitRelativePath Read only  
Returns the path the URL of the File is relative to.
File.type Read only
Returns the MIME type of the file.

然后想要获得file的data,则可以通过file集成自Blob的:

A File object is a specific kind of a Blob, and can be used in any context that a Blob can. In particular, FileReader, URL.createObjectURL(), createImageBitmap(), and XMLHttpRequest.send() accept both Blobs and Files.

去获得。

转载请注明:在路上 » 【已解决】JS中的File对象有哪些属性以及如何获得file的data数据

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.183 seconds, using 22.09MB memory