HTML文件上传

使用 input ，指定类型为 file ，来完成文件上传功能。

多文件上传需要在标签上添加 mulyiple 属性：

使用 accept 属性来限制上传文件的类型，当然这么做任然是不可靠的，还需要后端做进一步的判断。

如果我们是用户，当我们上传了一张图片，却只显示了几个文字，是不是很不爽，那我们怎么来实现预览功能呢？

我们可以使用 FileReader 将图像转换为二进制字符串，然后添加 load 事件监听，在文件上传成功后获取二进制字符串。

显示文件上册进度 来提高用户体验

FileReader 还有一个 progress 事件，表示当前上传进度，配合HTML5的 progress 标签，我们来模拟一下文件的上传进度。

，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。

$(function(){

...接上部分

var box = document.getElementById('drop_area')//拖拽区域

box.addEventListener("drop",function(e){

e.preventDefault()//取消默认浏览器拖拽效果

var fileList = e.dataTransfer.files//获取文件对象

//检测是否是拖拽文件到页面的 *** 作

if(fileList.length == 0){

return false

}

//检测文件是不是图片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是图片！")

return false

}

//拖拉图片到浏览器，可以实现预览功能

var img = window.webkitURL.createObjectURL(fileList[0])

var filename = fileList[0].name//图片名称

var filesize = Math.floor((fileList[0].size)/1024)

if(filesize>500){

alert("上传大小不能超过500K.")

return false

}

var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>"

$("#preview").html(str)

//上传

xhr = new XMLHttpRequest()

xhr.open("post", "upload.php", true)

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")

var fd = new FormData()

fd.append('mypic', fileList[0])

xhr.send(fd)

},false)

})

安卓APP的WebView默认屏蔽了该控件的使用，有些安卓APP之所以能支持文件选择和上传，主要可能是有可能采取了如下措施之一：

（1）可能在该APP中重写了相关方法（http://stackoverflow.com/questions/5907369/file-upload-in-webview）

（2）提供了JS Bridge来供web页面调用

所以，单从前端技术上是解决不了这个问题的。

这个问题之所以不太好排查，一方面跟手机端的图片上传功能我不太常用到有很大关系，另一方面也因为见到一些其它的APP容器能支持该功能，所以思维在习惯上已经形成定势，误以为这是WebView默认就支持的。

末了，顺便提醒一句，下次进行类似功能的需求评审，别忘了先了解下相应的APP容器是否支持该功能，如果没有，则需要找到相应的客户端开发同学评估一下工时，以免造成影响项目进度的风险

---