遇到项目，要求做一个影像系统，对于前端开发需要了解file的相关属性，以及如何开发。工欲善其事，必先利器嘛。度娘一阵子搜索，找资料。这年头，需要的是你解决问题的能力啊！
参考应用：https://www.cnblogs.com/sunliyuan/p/5737928.html
http://blog.okbase.net/jquery2000/archive/1296.html（解释的也很清楚）
http://blog.csdn.net/qingyjl/article/details/52003567
文件(File) 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
File 接口基于Blob，继承了 blob的功能并将其扩展使其支持用户系统上的文件。Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。
有关于file的官方文档，可以参看一个较为专业的官网：https://developer.mozilla.org/zh-CN/docs/Web/API/File 这个里面讲述的非常详细，有时间多看看。
这里可以了解到file接口的属性。
File.name；返回当前 File 对象所引用文件的名字。
File.size；返回文件的大小。
File.lastModified；返回当前 File 对象所引用文件最后修改时间， 自 1970年1月1日0:00 以来的毫秒数。
File.webkitRelativePath 返回 File 相关的 path 或 URL。
是时候来个例子，
// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput"> var fileInput = document.getElementById("myfileinput"); // files is a FileList object (simliar to NodeList) var files = fileInput.files; for (var i = 0; i < files.length; i++) { var type = files[i].type; var name = files[i].name; alert("Filename: " + name + " , Type: " + type); }
files 是一个 FileList 对象(类似于NodeList对象)。input里type=file里都有这个files属性，意为获取文件集合。
再上个完整例子：
<!DOCTYPE HTML> <html> <head> </head> <body> // multiple属性可以让用户能选择多个文件 <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // 获取到input元素 var fileInput = document.querySelector("#myfiles"); var files = fileInput.files; // 获取到所选文件数量 var fl=files.length; var i=0; while ( i < fl) { var file = files[i]; alert(file.name); i++; } } // 设置change事件处理函数 document.querySelector("#myfiles").onchange=pullfiles; </script> </html>
好了，到这里我们来讲一下上传图片，将图片显示出来放到页面的方法。HTML5读取input[type=file]中的图片
参考资料：《HTML5学习之FileReader接口》——http://blog.csdn.net/zk437092645/article/details/8745647
来个demo
<form id="imgForm">
<input type="file" class="addBorder">
<br/>
<button type="button" onclick="loadImg()">获取图片</button>
</form>
<div class="addBorder" id="imgDiv">
<img id="imgContent">
</div>
function loadImg(){ //获取文件 var file = $("#imgForm").find("input")[0].files[0]; //创建读取文件的对象 var reader = new FileReader(); //创建文件读取相关的变量 var imgFile; //为文件读取成功设置事件 reader.onload=function(e) { alert('文件读取完成'); imgFile = e.target.result; //获取当前文件的内容 console.log(imgFile); $("#imgContent").attr('src', imgFile); }; //正式读取文件 reader.readAsDataURL(file); }
这里要注意 reader.onload是最后执行的，在正式读取文件之后。
reader.readAsDataURL(file);//转化为base64格式。
还有的是转化为blob对象的，可以参看网站 https://www.cnblogs.com/saysmy/p/5626337.html
<input type="file" name="2" class="file" accept="image/*" capture="camera" id="file39" />
var file = document.getElementById(idFile);
var fileList = file.files; //获取的图片文件
var imgUrl = window.URL.createObjectURL(fileList[i]);
可以参考网站：http://blog.csdn.net/fd214333890/article/details/71250488