文件操作具体指的是文件上传，通常在表单中采用
<input type="file" id="test-file-upload">来上传文件。表单form要做一些设置
<form id="form1" enctype="multipart/form-data" method="post"> <input type="file" id="test-file-upload"> </form>enctype必须为multipart/form-data，目的是浏览器的正确编码，提交方法为post。
提交的文件处理一般都是后台来处理，而js则是处理对文件的校验。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作文件</title> </head> <body> <form id="form1" enctype="multipart/form-data" method="post"> <input type="file" id="test-file-upload"> </form> <br> <button type="submit" onclick="aa()">submit</button> <script> function aa() { var f=document.getElementById('test-file-upload'); var filename=f.value; if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) { alert('Can only upload image file.'); return false; }else { alert(' upload image file success'); } } String.prototype.endsWith=function(str){ if(str==null||str==""||this.length==0||str.length>this.length) return false; if(this.substring(this.length-str.length)==str) return true; else return false; return true; } String.prototype.startWith = function(str){ if(str == null || str== "" || this.length== 0 || str.length > this.length){ return false; } if(this.substr(0,str.length) == str){ return true; }else{ return false; } return true; }; </script> </body> </html>上传一张图片，需要验证图片的格式，js没有提供endwith方法，故而需要自己封装一个endwith方法。
获取上传文件信息，对读取文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>读取上传的文件</title> </head> <body> <form> <input type="file" id="test_upload_file" onchange="upload_file()"> </form> <br> <!--<button type="submit" onclick="upload_file()">Submit</button>--> <p id="test-file-info"></p> <br> <div id="test-image-preview" style="width: 200px;height: 200px"> </div> </body> <script> function upload_file() { var fileInput=document.getElementById('test_upload_file'); var info=document.getElementById('test-file-info'); var preview=document.getElementById('test-image-preview'); fileInput.addEventListener('change',function () { preview.style.backgroundImage=''; if(!fileInput.value){ info.innerHTML='没有选择文件'; return; } var file=fileInput.files[0]; info.innerHTML='文件'+file.name+'<br>'+ '大小'+file.size+'<br>'+ '修改'+file.lastModifiedDate; if(file.type!=='image/jpeg'&&file.type!=='image/png'&&file.type!=='image/gif'){ alert('上传的不是有效图片'); return; } var reader=new FileReader(); reader.onload=function (e) { var data=e.target.result; preview.style.backgroundImage='url('+data+')'; } reader.readAsDataURL(file); }); } </script> </html>这里创建一个表单，上传文件，创建一个p标签打印文件信息，创建一个div显示上传图片。
这里upload_file方法需要在onchange监听里面回调，监听上传控件，清除div背景，如果值为空，则为上传文件，获取文件上传列表的第一个文件，打印文件名称大小修改日期等属性，并判断文件类型。
通过filereader来获取文件，js通过单线程来执行，获取图片必须要异步进行， 所以调用了reader.readAsDataURL(file);来异步执行。
但是我们不知道何时执行结束来获取图片，所以需要回调监听
reader.onload = function(e) { // 当文件读取完成后，自动调用此函数: };在里面获取并展示图片。
