个人使用网站,免费源码大全,自动化系统网站建设,亚洲室内设计公司排名在HTML5以前#xff0c;HTML的文件上传域的功能具有很大的局限性#xff0c;这种局限性主要体现在如下两点#xff1a;每次只能选择一个文件进行上传客户端代码只能获取被上传文件的文件路径#xff0c;无法访问实际的文件内容一、FileList对象和File对象HTML5为typefile 的…在HTML5以前HTML的文件上传域的功能具有很大的局限性这种局限性主要体现在如下两点每次只能选择一个文件进行上传客户端代码只能获取被上传文件的文件路径无法访问实际的文件内容一、FileList对象和File对象HTML5为typefile 的元素增加了两个属性。accept:该属性控制允许上传的文件类型。该属性为一个或多个MIME类型字符串。多个MIME类型字符串之间应以都好分割。multiple该属性设置是否允许选择多个文件JavaScript可以通过files属性访问typefile的元素生成的文件上传域的所有文件该属性返回一个FileList对象FileList对象相当于一个数组开发者可以使用类似于数组的方法来访问该数组内的每个File对象。File对象是一个JavaScript对象可以通过该对象获取浏览器的所有文件信息。File对象包含如下属性。name:返回该File对象对应的文件的文件名 不包括文件路径部分type返回该File对象的文件的MIME类型字符串。size返回该File对象的对应的文件的大小字节单位实例预览图片varimgInputdocument.getElementById(images);imgInput.οnchange function() {//1.获取所有选中文件列表varfileListimgInput.files;//2.遍历显示信息for(vari 0; ivardivdocument.createElement(div);div.innerHTML 第 (i 1) 个文件的文件名 file.name ,文件类型 file.type 文件大小 file.size;//添加到 body中document.body.appendChild(div);}}显示结果提示该文件选择框设置了acceptimage/*只显示图片。不要靠accept属性来过滤文件类型因为这只是客户端的文件类型过滤这种文件类型过滤是很脆弱的如果开发者需要进行文件上传则必须在服务器端对文件类型进行过滤。二、使用FileReader读取文件内容FileReader同样是一个JavaScript对象开发者可以通过该对象在客户端读取 文件上传域所选择的文件内容.关于FileReader实例1读取文本文件读取为二进制读取为DataURL//判断浏览器是否支持FileReader对象varreaderif(FileReader) {reader newFileReader();}else{alert(您的浏览器不支持FileReader对象);}//1.读取为文本varfile1document.getElementById(file1);file1.οnchange function() {varfilefile1.files[0];//判断读取的第一个文件是否是文本文件if(/text/w/.test(file.type)) {//以文本的方式读取内容reader.readAsText(file,gbk);reader.οnlοad function() {document.getElementById(result).innerHTMLreader.result;}}else{alert(读取的不是文本文件);}}//2.读取为二级制varfile2document.getElementById(file2);file2.οnchange function() {varfilefile2.files[0];//以二进制流的方式读取第一个文件//reader.readAsArrayBuffer(file); //返回二进制数组reader.readAsBinaryString(file);//返回二进制字符串reader.οnlοad function() {document.getElementById(result).innerHTMLreader.result;}}//3.读取为DataURLvarfile3document.getElementById(file3);file3.οnchange function() {varfilefile3.files[0];reader.readAsDataURL(file);reader.οnlοad function() {document.getElementById(result).innerHTMLreader.result;}}FileReader在读取文件的过程中可能多次触发onprogress事件通过该事件绑定监听器即可实时监控文件的读取进度。提示FileReader只是客户端的JavaScript对象使用FileReader所进行的上传也只是把磁盘上的文件读取到浏览器内存中并未真正上传到服务器。如果需要真正把客户端文件上传到服务器则可把文件数据以POST请求方式提交到远程服务器远程服务器负责接收文件数据并把数据内容保存到服务器。实例2读取二进制文件显示进度
