(四)JavaScript关于浏览器--操作文件
四、操作文件
在HTML表单中，可以上传文件的唯一控件就是<input type="file">。
1. 出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件；
2. 用JavaScript对<input type="file">的value赋值是没有任何效果的；
3. 当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径；
4. JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件；
5. 表单的enctype必须指定为multipart/form-data，method必须指定为post，只在使用这个元素时；
FileAPI
HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。检测是否支持：
if(window.File && window.FileReader && window.FileList && window.Blob) {
document.write("Great success! All the File APIs are supported.");
} else {
document.write('The File APIs are not fully supported in this browser.');
}
扫描二维码关注公众号，回复：
2552473 查看本文章
file控件支持选择多个文件，用户选择了某些文件之后，html5为我们提供了一个访问这些文件的对象 - FileList，这是一个类数组集合，每一个元素为一个File对象，File对象中包含了文件的所有可访问信息。
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="file" id="Files" name="files[]" multiple/>
<div id="Lists"></div>
<script>
function fileSelect(e) {
e = e || window.event;
var files = e.target.files; //FileList Objects =this.files
var output = [];
for(var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size +' bytes</li>');
}
document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>';
}
if(window.File && window.FileList && window.FileReader && window.Blob) {
document.getElementById('Files').addEventListener('change', fileSelect, false);
} else {
document.write('您的浏览器不支持File Api');
}
</script>
</body>
</html>
实现上传预览：
1）.readAsText(file,encoding);以纯文本的形式读取文件，将读取到的文件保存到result属性。encoding参数用于指定编码类型，是可选的。
2）.readAsDataURL(file);读取文件并将文件数据以URL形式保存到result属性中。（读取图像文件常用方法）是一个字符串
3）.readAsBinaryString(file);读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一字节。
4）.readAsArrayBuffer(file);读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
文件读取事件具体内容：
Onloadstart 文件读取开始时触发。Progress 当读取进行中时定时触发。事件参数中会含有已读取总数据量。
Abort 当读取被中止时触发。
Error 当读取出错时触发。
Load 当读取成功完成时触发。
Loadend 当读取完成时，无论成功或者失败都会触发。
var
fileInput = document.getElementById('test-image-file'),//要上传的文件
info = document.getElementById('test-file-info'), //文件信息
preview = document.getElementById('test-image-preview');//本来的背景图
//监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取输入的第一个文件
var file = fileInput.files[0];
// 显示file的信息 在文件信息这里显示
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; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...' 相当于this.result;
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数reader.onload。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。
另一种方法预览图片，获取路径在把它插入页面中:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body> <!-- onchange 事件会在域的内容改变时发生。this为这个input，这里是一张图 -->
上传图片: <input type="file" name="file" style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload"/>
<div id="imgPreview" style="width:120px; height:100px;margin-left:280px;"></div><!-- margin-left左边外间距 -->
<script>
function PreviewImage(imgFile){
//截取.到 最后的字符，就是图片的格式
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();//转换为小写字母
//判断格式
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
imgFile.focus();//这个input get focus
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();//字段内容被选种,focus是获得焦点
path = document.selection.createRange().text;//运用IE滤镜获取数据
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}
else//FF
{
path = imgFile.files[0].getAsDataURL();
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
// document.getElementById("img1").src = path;
}
}
}
</script>
</body>
</html>