<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="fileBox" multiple></input>
<input type="button" id="btn" value="读取"></input>
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementById('btn');
btn.onclick=read;
function read(){
var fileBox = document.getElementById("fileBox");
for (var i = 0; i <= fileBox.files.length - 1; i++)
{
var file=fileBox.files[i];
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(){
var result=document.getElementById("result");
var imgE=document.createElement("img"); imgE.style='width:300px;height:400px;';
imgE.src=this.result; //this.result获取到img的URL
result.appendChild(imgE);
};
};
}
</script>
当选择一张图片，点击‘读取’时：
相关推荐
本文实例为大家分享了js实现图片上传本地预览效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
本文实例为大家分享了js本地图片预览的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行 在HTML规范中,单独存在的标签是不需要使用/来自我...
简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个&...上传图片显示预览
发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加觉得html5好玩了，想着也试试写写这功能权当...
目前网上有很多支持图片上传时进行预览的...究其原因是浏览器厂商为了进一步强化安全，限制了file标签直接读取本地路径的能力，在HTML5下只有通过FileReader的API来实现这一需求了。 比如对于CSDN写博客的时候上传一张
最近工作中需要H5上传显示图片的功能，如图： 直接上代码： html部分 <div class=figure-box id=figure_box></div> <input type=file id=imgUploadBtn /> <a><i>添加作品</a></div> 我这边用css将...
15.2.3 使用readAsDataURL方法预览图片 286 15.2.4 使用readAsText方法读取文本文件 287 15.2.5 FileReader接口中的事件 288 15.3 拖放API 290 15.3.1 实现拖放的步骤 290 15.3.2 通过拖放显示欢迎...
今天刚试过chrome的drag and drop API，它能非常简单的将本地的图片放到浏览器中进行预览。试想一下当我们把一个文图片拖拽到浏览器里会发生什么事情，你的浏览器试图打开一个新的页面并加载这个图片。现在我不想...
另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。 这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低...
Vue图片与文字混输的实现方法可以参考这篇文章 ...vue中上传视频或图片或图片和文字一起到后端...预览本地文件也可以通过HTML5的FileReader 4.文件上传，也可以先上传到第三方（如七牛云），再把七牛云返回的key值传给后端
这种方式上传的图片没有经过压缩，上传时间比较长且有可能失败）直接通过某些兼容移动端的插件进行上传通过URL.createObjectURL的方式读取图片并处理后上传base64格式的数据（兼容性）通过FileReader的方式读取并...