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

文件上传： （IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。）

1、允许上传文件数量

允许选择多个文件：

只允许上传一个文件：

2、上传指定的文件格式

这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式，可手动修改成其它文件格式。

如果不限制上传图片的格式可写成：accept="image/*"

其它格式参考如下：

*.3gpp   audio/3gpp, video/3gpp    3GPP Audio/Video
*.ac3    audio/ac3    AC3 Audio
*.asf    allpication/vnd.ms-asf    Advanced Streaming Format
*.au     audio/basic    AU Audio
*.css    text/css    Cascading Style Sheets
*.csv    text/csv    Comma Separated Values
*.doc    application/msword    MS Word Document
*.dot    application/msword    MS Word Template
*.dtd    application/xml-dtd    Document Type Definition
*.dwg    image/vnd.dwg    AutoCAD Drawing Database
*.dxf    image/vnd.dxf    AutoCAD Drawing Interchange Format
*.gif    image/gif    Graphic Interchange Format
*.htm    text/html    HyperText Markup Language
*.html   text/html    HyperText Markup Language
*.jp2    image/jp2    JPEG-2000
*.jpe    image/jpeg    JPEG
*.jpeg   image/jpeg    JPEG
*.jpg    image/jpeg    JPEG
*.js     text/javascript, application/javascript    JavaScript
*.json   application/json    JavaScript Object Notation
*.mp2    audio/mpeg, video/mpeg    MPEG Audio/Video Stream, Layer II
*.mp3    audio/mpeg    MPEG Audio Stream, Layer III
*.mp4    audio/mp4, video/mp4    MPEG-4 Audio/Video
*.mpeg   video/mpeg    MPEG Video Stream, Layer II
*.mpg    video/mpeg    MPEG Video Stream, Layer II
*.mpp    application/vnd.ms-project    MS Project Project
*.ogg    application/ogg, audio/ogg    Ogg Vorbis
*.pdf    application/pdf    Portable Document Format
*.png    image/png    Portable Network Graphics
*.pot    application/vnd.ms-powerpoint    MS PowerPoint Template
*.pps    application/vnd.ms-powerpoint    MS PowerPoint Slideshow
*.ppt    application/vnd.ms-powerpoint    MS PowerPoint Presentation
*.rtf    application/rtf, text/rtf    Rich Text Format
*.svf    image/vnd.svf    Simple Vector Format
*.tif    image/tiff    Tagged Image Format File
*.tiff   image/tiff    Tagged Image Format File
*.txt    text/plain    Plain Text
*.wdb    application/vnd.ms-works    MS Works Database
*.wps    application/vnd.ms-works    Works Text Document
*.xhtml  application/xhtml+xml    Extensible HyperText Markup Language
*.xlc    application/vnd.ms-excel    MS Excel Chart
*.xlm    application/vnd.ms-excel    MS Excel Macro
*.xls    application/vnd.ms-excel    MS Excel Spreadsheet
*.xlt    application/vnd.ms-excel    MS Excel Template
*.xlw    application/vnd.ms-excel    MS Excel Workspace
*.xml    text/xml, application/xml    Extensible Markup Language
*.zip    aplication/zip    Compressed 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

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就可以被用来追踪进度。

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

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

确定

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

6、文件读取进度

 
    
 
        
分度读取文件：
 
         
         
        
 
            读取进度： 
        
 
        
 
    
 
 
  

本文代码以chrome测试为主。

到此这篇关于JavaScript文件上传问题整理的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。