JavaScript文件上传的常见问题整理 JavaScript文件上传的常见问题整

【JavaScript文件上传的常见问题整理】文件上传：（IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。）

1、允许上传文件数量允许选择多个文件：

只允许上传一个文件：

2、上传指定的文件格式

这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式，可手动修改成其它文件格式。
如果不限制上传图片的格式可写成：accept="image/*"
其它格式参考如下：

*.3gppaudio/3gpp, video/3gpp3GPP Audio/Video
*.ac3audio/ac3AC3 Audio
*.asfallpication/vnd.ms-asfAdvanced Streaming Format
*.auaudio/basicAU Audio
*.csstext/cssCascading Style Sheets
*.csvtext/csvComma Separated Values
*.docapplication/mswordMS Word Document
*.dotapplication/mswordMS Word Template
*.dtdapplication/xml-dtdDocument Type Definition
*.dwgimage/vnd.dwgAutoCAD Drawing Database
*.dxfimage/vnd.dxfAutoCAD Drawing Interchange Format
*.gifimage/gifGraphic Interchange Format
*.htmtext/htmlHyperText Markup Language
*.htmltext/htmlHyperText Markup Language
*.jp2image/jp2JPEG-2000
*.jpeimage/jpegJPEG
*.jpegimage/jpegJPEG
*.jpgimage/jpegJPEG
*.jstext/javascript, application/javascriptJavaScript
*.jsonapplication/jsonJavaScript Object Notation
*.mp2audio/mpeg, video/mpegMPEG Audio/Video Stream, Layer II
*.mp3audio/mpegMPEG Audio Stream, Layer III
*.mp4audio/mp4, video/mp4MPEG-4 Audio/Video
*.mpegvideo/mpegMPEG Video Stream, Layer II
*.mpgvideo/mpegMPEG Video Stream, Layer II
*.mppapplication/vnd.ms-projectMS Project Project
*.oggapplication/ogg, audio/oggOgg Vorbis
*.pdfapplication/pdfPortable Document Format
*.pngimage/pngPortable Network Graphics
*.potapplication/vnd.ms-powerpointMS PowerPoint Template
*.ppsapplication/vnd.ms-powerpointMS PowerPoint Slideshow
*.pptapplication/vnd.ms-powerpointMS PowerPoint Presentation
*.rtfapplication/rtf, text/rtfRich Text Format
*.svfimage/vnd.svfSimple Vector Format
*.tifimage/tiffTagged Image Format File
*.tiffimage/tiffTagged Image Format File
*.txttext/plainPlain Text
*.wdbapplication/vnd.ms-worksMS Works Database
*.wpsapplication/vnd.ms-worksWorks Text Document
*.xhtmlapplication/xhtml+xmlExtensible HyperText Markup Language
*.xlcapplication/vnd.ms-excelMS Excel Chart
*.xlmapplication/vnd.ms-excelMS Excel Macro
*.xlsapplication/vnd.ms-excelMS Excel Spreadsheet
*.xltapplication/vnd.ms-excelMS Excel Template
*.xlwapplication/vnd.ms-excelMS Excel Workspace
*.xmltext/xml, application/xmlExtensible Markup Language
*.zipaplication/zipCompressed Archive

3、FileList上传文件数组 FileList对象都是一组文件对象的集合，而文件对象则拥有下列的属性：
name – 文件名（不包含路径）
type – 文件的MIME类型（小写）
size – 文件的尺寸（单位为字节）
lastModifiedDate 为上传文件的最后修改时间
通过上面的几个对象，我们能够控制用户上传的文件大小和文件类型，以便减轻服务器再次检测时的压力，并提升安全系数

var a=document.getElementById("file"); a.onchange=function(e){e=e || window.event; var b=e.target.files; alert(b[0].name); }

4、拖动上传 dataTransfer 对象
dropEffect[=sCursorStyle]
设置或获取拖拽操作的类型和要显示的光标类型

copy：复制样式被显示
link：链接样式被显示
move：移动样式被显示
none：默认,没有鼠标样式被定义

effectAllowed[=sEffect]
设置或获取数据传送操作可应用与该对象的源元素

copy 选项被复制
link 选项被dataTransfer作为link方式保存
move 当放置时,对象被移动至目标对象
copylink 选项是被复制还是被作为link方式保存关键在于目标对象
linkmove 选项是被作为link方式保存还是被移动关键在于目标对象
all 所有效果都被支持
none 不支持任何效果
uninitialized 默认不能通过这个属性传递任何值

setData(sFormat,sData) 将指定格式的数据赋值给dataTransfer或者clipboardData sFormat:URL,Text
getData(sFormat) 从dataTransfer或者clipboardData中获取值 sFormat:URL,Text
clearData([sFormat]) 通过dataTransfer或者clipboardData中删除某种格式的数据 sFormat:Text,URL,File,HTML,Image

#DropZone{border:1px solid #CCC; height:50px; }

5、FileReader文件预览，读取文件数据（同时可读取图片文件宽高） FileReader包含四种异步读取文件的方式：

FileReader.readAsBinaryString(Blob|File) - result属性包含的是file/blob的二进制字符串形式的数据。每个字节由一个0-255的整数表示。
FileReader.readAsText(Blob|File, opt_encoding) - result属性包含的是以文本方式表示的file/blob数据。默认情况下，字符串以'UTF-8'编码方式解码。使用opt_encoding参数可以指定一个不同的格式。
FileReader.readAsDataURL(Blob|File) - result属性包含的是以data URL编码的file/blob数据。
FileReader.readAsArrayBuffer(Blob|File) - result属性包含的是以ArrayBuffer对象表示的file/blob数据。

一旦这些read方法被调用，onloadstart, onprogress, onload, onabort, onerror, onloadend就可以被用来追踪进度。

body{margin:0; padding:0; }img{vertical-align:bottom; }

上传txt文件内容预览(需对<>&'"|等符号进行过滤否则会中断读取)：

body{margin:0; padding:0; }img{vertical-align:bottom; }

读取上传txt指定区域文本内容：

body{margin:0; padding:0; }img{vertical-align:bottom; }

File接口提供了slice方法支持把文件切成不同的片段,第一个参数是起始的字节数,第二个参数是结束的字节数，还有一个可选的内容类型字符串可以作为第三个参数。早期的chrome和firefox版本不支持file.slice 可使用file.webkitSlice和file.mozSlice替代，最新版本均支持file.slice。
6、文件读取进度