HTML读取本地图片文件
原
Html读取本地文件夹下文件
在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有文件（本例以图片为例）并显示。
技术分析
存在问题
Html中file标签获取到的路径时相对的。
Html中Img指定源时需要的是绝对路径。
解决方法
调用Web API接口FileReader中readAsDataURL方法读取数据（这个函数参数file标签获取到的文件路径），然后把数据加载到FileReader中（base64格式），之后就可以用Img来指定源时base64格式的数据，可以绘制图片。
技术介绍
FileReader API
事件处理
FileReader.onabort
处理abort事件。该事件在读取操作被中断时触发。
FileReader.onerror
处理error事件。该事件在读取操作发生错误时触发。
FileReader.onload
处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart
处理loadstart事件。该事件在读取操作开始时触发。
FileReader.onloadend
处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress
方法
FileReader.abort()
中止读取操作。在返回时，readyState属性为DONE。
FileReader.readAsArrayBuffer()
开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
FileReader.readAsBinaryString()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
FileReader.readAsText()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
事例
流程
Demo
图片文件
代码
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>ReadImage
</title>
-
<script type="text/javascript" src="./jquery.js">
</script>
-
</head>
-
<body>
-
<input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
-
<canvas id="myCanvas" width=1440 height=900>
</canvas>
-
-
<script type="text/javascript">
-
var imgPosX =
0;
-
var imgWidth =
256;
-
function dealSelectFiles(){
-
/// get select files.
-
var selectFiles =
document.getElementById(
"selectFiles").files;
-
-
for(
var file
of selectFiles){
-
console.log(file.webkitRelativePath);
-
-
/// read file content.
-
var reader =
new FileReader();
-
reader.readAsDataURL(file);
-
-
reader.onloadend =
function(){
-
/// deal data.
-
var img =
new Image();
-
/// after loader, result storage the file content result.
-
img.src =
this.result;
-
img.onload =
function(){
-
var myCanvas =
document.getElementById(
"myCanvas");
-
var cxt = myCanvas.getContext(
'2d');
-
-
cxt.drawImage(img, imgPosX,
0);
-
imgPosX += imgWidth;
-
}
-
}
-
}
-
}
-
</script>
-
</body>
-
</html>
结果
改进
采用base64方式，数据量比之前png格式数据多出1/3，可以考虑优化。
文件信息和数据需要建立映射关系。
<script>
(function(){
function setArticleH(btnReadmore,posi){
var winH = $(window).height();
var articleBox = $("div.article_content");
var artH = articleBox.height();
if(artH > winH*posi){
articleBox.css({
'height':winH*posi+'px',
'overflow':'hidden'
})
btnReadmore.click(function(){
if(typeof window.localStorage === "object" && typeof window.csdn.anonymousUserLimit === "object"){
if(!window.csdn.anonymousUserLimit.judgment()){
window.csdn.anonymousUserLimit.Jumplogin();
return false;
}else if(!currentUserName){
window.csdn.anonymousUserLimit.updata();
}
}
articleBox.removeAttr("style");
$(this).parent().remove();
})
}else{
btnReadmore.parent().remove();
}
}
var btnReadmore = $("#btn-readmore");
if(btnReadmore.length>0){
if(currentUserName){
setArticleH(btnReadmore,3);
}else{
setArticleH(btnReadmore,1.2);
}
}
})()
</script>
</article>
扫一扫
4382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
