文件操作具体指的是文件上传，通常在表单中采用
<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) {
// 当文件读取完成后，自动调用此函数:
};在里面获取并展示图片。