html5 上传文件,web页面上传文件
文件接口提供与文件相关的信息，并运行JavaScript来访问网页上的文件内容。
File对象来自用户使用input选项卡选择文件时返回的FileList对象，以及拖放操作的DataTransfer对象。文件是一种特殊的Blob，可以在任何可以使用Blob的上下文中使用。
要在网页中使用文件，需要涉及的对象有：file对象、FileList对象和FileReader对象。
FileList对象
列表来自两个地方，即input元素的files属性和拖放API(拖动文件时，事件。DataTransfer.files是一个文件列表对象)。
输入id= file item type= file var file list=document . getelementbyid( fileItem )。文件FileList对象的标准属性
长度：这是一个只读属性。此属性返回包含在FileList对象中的File对象的长度。
FileList对象的标准方法
Item(index):获取FileList对象中指定位置的File对象。可以用数组索引的形式缩写。
File对象
列表对象的每一项都是一个文件对象。文件是一种特殊的Blob。
File对象的标准属性
1.lastModified:返回文件被修改的时间。这个时间是从1970年1月1日0: 00: 00开始的毫秒数。是只读属性。
2.name:返回file对象引用的文件的文件名，这是一个只读属性。
3.type:返回file对象引用的文件的文件类型，即我的类型。这是一个只读属性。
4.size:返回file对象引用的文件的文件大小。这是一个只读属性。
File对象的标准方法
没有为File对象定义单独的方法，但它具有从Blob对象继承的方法。
FileReader对象
FileReader对象使web应用程序能够异步读取用户计算机上的文件。
FileReader()是一个构造函数，通过它可以创建一个新的FileReader对象。
var file reader=new fileReader()；
FileReader对象的标准属性
1.error:返回文件读取过程中出现的错误。
2.result:返回文件的内容，返回值的类型为String或ArrayBuffer。只有在读取操作完成后，此属性才是合法的。
3.readyState:返回读取操作的当前状态。可能的值为0:读取尚未开始，1:读取正在进行，2:读取已完成。
FileReader对象的标准方法
1.abort():中断读取操作。readyState的值变为2。
2.readAsArrayBuffer(Blob):读取指定的Blob，比如File对象(File对象是一种特殊的Blob)。读取一完成，readyState属性的值就会变成2，result属性是一个表示文件数据的ArrayBuffer。
3.readAsDataURL(Blob):读取指定的Blob，比如File对象(File对象是一种特殊的Blob)。读取一完成，readyState属性的值就会变成2，result属性是表示文件数据的URL，数据格式是base64编码的字符串。
input type= file onchange= preview file() brimg src= height= 200 alt=图像预览.function preview file(){ var preview=document . query selector( img )；var file=document . query selector( input[type=file])。文件[0]；var reader=new FileReader()；reader.addEventListener(load ，function(){ preview . src=reader . result；}，假)；if(file){ reader . readasdataurl(file)；} } 4 . reada text(Boob，encoding):读取指定的Blob，比如File对象(File对象是一种特殊的Blob)。一旦读取完成，readyState属性的值将变为2，而result属性是表示文件数据的文本字符串。第二个参数是可选的，它用于指定结果属性中文本字符串的编码方法。默认值是UTF-8。
FileReader对象的事件
1.abort:当读操作终止时触发。
2.error:在读取操作过程中遇到错误时触发。
3.load:当读操作成功完成时触发。
4.loadend:在读操作结束时触发。不能阅读成功或失败。
5.loadStart:当读操作开始时触发。
6 .过程：阅读过程中触发。
在web应用中使用文件
使用HTML5中的文件对象，可以访问选择的本地文件，并且读取这些文件中的内容。文件对象要么来自于投入元素，要么来自于拖放接口。
通过input元素选择文件
输入类型=文件id=输入访问通过投入选择的文件
var选择的文件=文档。getelementbyid(“输入”).文件[0];上述代码段一次只能选择一个文件，如果一次要选择多个文件，就需要给投入元素添加一个多个的属性，并将多个的属性设置我没错。在壁虎1.9.2之前不支持一次选择多个文件。
通过drag and drop接口选择文件
关于拖放接口可以查看HTML5拖拽事件。
第一步：创建一个放置区域。一个普通的元素，如分区，p等。
第二步：给放置区添加下降，拖拽，拖拽事件处理程序。其中起关键作用的是滴事件处理程序。
下面是一个显示缩略图的例子：
div id= Dropbox class= Dropbox /div。Dropbox { border:纯色3px红色；高度：400像素宽度：自动；} var dropboxDropbox=document。getelementbyid( Dropbox )；//注册事件处理程序Dropbox。addevent侦听器( dragenter ，drag enter，false)；Dropbox。addevent侦听器( dragover ，dragover，false)；dropbox.addEventListener(drop ，drop，false)；函数拖动回车(e){ e .停止传播()；e .防止违约()；}函数dragover(e){ e .停止传播()；e .防止违约()；}函数drop(e){ e .停止传播()；e .防止违约()；var dt=e . datatransfervar files=dt . fileshandlefiles(文件);}函数处理文件(files){ for(var I=0；我文件。长度；I){ var file=files[I]；var imagetype=/^image\//；如果(!imagetype。测试(文件。type)){继续；} var img=文档。createelement(“img”)；img.file=fileDropbox。appendchild(img)；var reader=new FileReader()；读者。onload=function(){ img。src=读者。结果；};reader.readAsDataURL(文件);}} 以上所述是小编给大家介绍的HTML5文件接口在网页面上使用文件下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。