（四）JavaScript关于浏览器--操作文件

最新推荐文章于 2023-04-17 09:00:00 发布

朝屯暮蒙vi

最新推荐文章于 2023-04-17 09:00:00 发布

阅读量467

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_35418250/article/details/77892398

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

(四)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.');  
    }

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;" οnchange="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>