简单HTML5移动端(客户端)图片上传

wxcmdn 2019-09-05

上传我们一般都是用“input[type=file]”控件。当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象。

1. accept属性

该属性表明了服务器端可接受的文件类型,可以限制你手机选择相关的文件,如果限制多个,可以用逗号分割,下面的代码就表示只能选择图片与音频相关的文件

<input accept="image/*,audio/*" type="file"/>

简单HTML5移动端(客户端)图片上传

2. change事件

一般选择文件都会使用“change”事件,下面的代码就是绑定了change事件,弹出文件大小

var upload = document.getElementById('upload');
upload.addEventListener('change', function() {
  var file = upload.files[0];
  alert(file.size);
}, false);

有些手机浏览器在点击的时候,会弹出键盘选择,我用onfocus="this.blur()",来强制失去焦点

<input type="file" id="upload" onfocus="this.blur()"/>

3. File对象

用户所选择的文件都存储在了一个FileList对象上,其中每个文件都对应了一个File对象
File对象负责处理那些以文件形式存在的二进制数据,也就是操作本地文件
File对象是Blob的特殊类型,即大块的二进制数据,File对象的尺寸及类型等属性都继承自Blob

File对象可以通过3种方式获取

  1. <input>元素上选择文件后返回的FileList对象中的成员
  2. 拖放操作【Drag或Drop】生成的 DataTransfer对象内files属性中的成员
document.getElementById('upload').files[0]//选取第一个文件对象

4. formData

利用FormData对象,可以使用键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"
使用FormData的最大优点就是我们可以异步上传一个二进制文件

var formData = new FormData();
  formData.append("name", "value");//普通键值对
  formData.append("blob", blob); //传递一个blob对象
  formData.append("file", file); //传递一个file对象
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "http://xx.com");
  oReq.send(formData);

相关推荐