html web上传文件原理,input[type="file"]上传文件原理详解

input[type="file"]上传文件原理详解

最近又搞了一下上传文件功能，用别人的插件不大符合自己要求，还是用HTML5的input[type="file"]比较好控制，现在重新回顾一下使用input[type="file"]上传文件

【1】修改input[type="file"] 的样式

我个人感觉input type=file 的样式有点丑，还是修改修改

i>上传音频

a>

a>

.upload{

padding:4px 10px;

height:20px;

position:relative;

}

//隐藏

.change{

position:absolute;

overflow:hidden;

right:0;

top:0;

opacity:0;

}

【2】input[type="file"]的属性

multiple="multiple"可接受多个值的文件上传字段

input[type="file"]可以实现上传多个文件，只需要给添加multiple="multiple"属性便实现同时上传多个文件效果。

2) accept="application/x-msdownload,video/*"

input[type="file"]可以实现限定上传的文件类型，只需要给添加 accept="video/*"(限定只上传视频文件)属性。

可以通过accept规定上传的文件类型，可以定义多个文件类型，用逗号隔开。

注意请不要将该属性作为唯一的验证工具，应该在服务器上对文件上传进行验证。

文件后缀名    文件类型

*.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

*.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】解析获取input[type="file"]的文件数据

如果你想要选中文件就自动提交可以给input[type="file"]onchange的改变事件，当你选择完文件就会执行该事件。

input[type="file"]数据解析

从输出的数据分析就知道获取的数据是一个数组，可以根据length获取上传的某个文件的信息

varf=document.getElementById("files");

console.log(f.files);

【4】如何与后台交互数据

可以通过form表单提交，但注意要给form表单添加两个属性

1】method="post"要用post提交

2】 enctype="multipart/form-data"要修改请求参数的格式

可以通过由表单构造的FormData对象，将需要请求参数以键值对的形式添加到FormData构造函数，由FormData构造函数传递数据给后台

(反正我觉得FormDate非常好用)

functionupinput(){

//new FormData的参数是一个DOM对象，而非jQuery对象

varformData =newFormData();

//获取该input的所有元素、属性

varf=document.getElementById("files");

varuserID=document.getElementById("userID").value;

for(vari = 0; i < f.files.length; i++) {

varstrname="file"+i;

//判断文件是否符合要求

if(!/\.(swf|flv|mp4|rmvb|avi|mpeg|ra|ram|mov|wmv)$/.test(f.files[i].name)) {

layer.alert("该上传的文件不是视频文件类型！", { icon: 5 , anim: 6 });

break;

}

//将参数以键值对的形式添加到formDate构造函数

formData.append("userID", userID);

formData.append(strname, f.files[i]);

}

console.log(f.files);

$.ajax({

url:"${ctx}/web/MyMusicServlet?method=uploadFiles&type=video",

type:'POST',

data: formData,//上传formdata封装的数据

async:true,

//下面三个参数要指定，如果不指定，会报一个JQuery的错误

cache:false,//不缓存

//不设置内容类型  jQuery不要去设置Content-Type请求头

contentType:false,

processData:false,// jQuery不要去处理发送的数据

success:function(data) {//成功回调

if(msg =="新增成功!") {

layer.alert(data);

}else{

layer.alert(data);

}

},

error:function(data) {

alert(data);

}

});

}

【5】其他细节操作

如果想要实现预览、读取等细节操作，可以通过FileReader接口，FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去。

也就是说可以通过FileReader的内置封装好的事件对上传的文件进行判断、处理。

(请看我下一篇关于这个的博客)