1.利用FileReader进行图片本地预览
FileReader类型实现的是一种异步文件读取机制,用来把文件读入内存,并且读取文件中的数据。各大浏览器的支持情况:
构造方法
var reader = new FileReader();
为了读取文件中的数据,FileReader提供了如下几个方法:
readAsText(file,encoding):以纯文本的形式读取文件,将读取到的文本保存在result属性中,第二个参数指定编码类型,可选。
readAsDataURL(file):读取文件并将文件以数据URL的形式保存在result属性中。
readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中,字符串中的每一个字符表示一个字节。
readAsArrayBuffer(file): 将一个包含文件内容的ArrayBuffer保存在result。
了解了FileReader的基本使用后,来实现下图片的本地预览功能:
<input type="file" name="inputfile" accept="image/*" onchange="readFile(this.files[0])"> <div id="preview"></div>
function readFile(f){ var reader = new FileReader(); reader.readAsDataURL(f); //base64编码 reader.onload = function(){ var preview = document.querySelector('#preview'); var img = document.createElement("img"); img.src = reader.result; preview.appendChild(img); } reader.onerror = function(e){ console.log("Error"+e); } }
页面效果看起来是这个样子的:
当选择图片后就可以本地预览啦,结合ajax实现图片上传预览功能。
效果图:
2.URL.createObjectURL()进行图片本地预览
URL.createObjectURL() 静态方法会创建一个 DOMString
,它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document
绑定。这个新的URL 对象表示着指定的 File
对象或者 Blob
对象。
构造方法
objectURL
=
URL.createObjectURL(blob); //参数blob:是用来创建 URL 的 file
对象或者 Blob
对象
在每次调用 createObjectURL()
方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用window.URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
HTML结构与之前一样。
if (window.URL) { var preview = document.querySelector('#preview'); var img = document.createElement("img"); img.src = window.URL.createObjectURL(f); img.onload = function(){ window.URL.revokeObjectURL(this.src); //释放内存 } preview.appendChild(img); }
效果如上。
相关推荐
这个html文件用html5实现了本地图片上传,在上传服务器前回显预览的功能
html file控件选择文件后立即预览 js实现 JS实现图片上传前先图片预览功能
主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下
是一段实现了可以选择本地图片预览并上传的效果代码,在预览区的图片是可以删除的,同时将本地图片拖动到网页规定的区域内也是可以自动添加到预览区的.
这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能,在父组件中每一张图片都可以实现图片放大查看。 子组件 <!--html部分--> <mt-swipe :auto=0 :show-indicators=false :...
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_...
早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览 现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox 上...
2012-05-14更新: 增加了通过资源管理器选择文件功能 ...增加图片浏览器功能 图片浏览器支持拖动、双击最大化/还原、更改尺寸 图片浏览器支持对数据源里面的图片进行导航 图片浏览器图片的放大和缩小
html5视频前端视频上传,手机拍照上传,手机录像上传。HLMT5中input实现多种文件上传,视频上传,图片上传,调用手机摄像头,照相机,相册等功能。
本文实例讲述了JS实现的input选择图片本地预览功能。分享给大家供大家参考,具体如下: 预览效果见下图: HTML代码如下: <!--input 触发 file click事件--> <input type=button value=选择文件 id=...
本文实例讲述了JavaScript实现预览本地上传图片功能。分享给大家供大家参考,具体如下: <html> <head> <title>www.jb51.net 图片上传预览</title> [removed] function PreviewImage...
本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下 HTML代码: <html> <head> <title>图片上传预览演示</...
另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低...
本地选中一张图片,嵌入html的同时会显示图片的本地的绝对路径,然后通过js简单的进行设置,应该就可以实现预览效果了。 但是实际上,目前只有低版本的IE浏览器才能实现这么个效果。究其原因是浏览器厂商为了进一步...
今天刚试过chrome的drag and drop API,它能非常简单的将本地的图片放到浏览器中进行预览。试想一下当我们把一个文图片拖拽到浏览器里会发生什么事情,你的浏览器试图打开一个新的页面并加载这个图片。现在我不想...
5.自主选择上传内容:用户可以通过上传按钮选择本地文件中预览并找出需要搜索的图片,再进行上传操作,以供系统进行搜索。 6.搜索结果展示:能够给出一组匹配度较高的搜索结果,将相似的图片分组展示,并提供图片...
发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》,更加觉得html5好玩了,想着也试试写写这功能权当...
花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述...
此款为图片上传插件、利用php+html实现的一个功能。同时还带有图片删除(直接删除本地资源文件)。我写了好几种方案可以去实现