html5移动端传图片不显示,简单HTML5移动端（客户端）图片上传

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

1. accept属性

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

2. change事件

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

var upload = document.getElementById('upload');

upload.addEventListener('change', function() {

var file = upload.files[0];

alert(file.size);

}, false);

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

3. File对象

用户所选择的文件都存储在了一个FileList对象上，其中每个文件都对应了一个File对象

File对象负责处理那些以文件形式存在的二进制数据，也就是操作本地文件

File对象是Blob的特殊类型，即大块的二进制数据，File对象的尺寸及类型等属性都继承自Blob

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

元素上选择文件后返回的FileList对象中的成员

拖放操作【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);