图片本地预览

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <style type="text/css">
  6. #preview, .img, img
  7. {
  8. width:200px;
  9. height:200px;
  10. }
  11. #preview
  12. {
  13. border:1px solid #000;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="preview"></div>
  19. <input type="file" onchange="preview(this)" />
  20. <script type="text/javascript">
  21. function preview(file)
  22. {
  23. var prevDiv = document.getElementById(‘preview‘);
  24. if (file.files && file.files[0])
  25. {
  26. var reader = new FileReader();
  27. reader.onload = function(evt){
  28. prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘;
  29. }
  30. reader.readAsDataURL(file.files[0]);
  31. }
  32. else
  33. {
  34. prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘;
  35. }
  36. }
  37. </script>
  38. </body>
  39. </html>
时间： 2024-10-11 04:54:46

图片本地预览的相关文章

iOS HTML图片本地预览

1.引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 2.原理 接触过web开发的人,就了解与html元素交互都是通过javascript进行的,比如点击.滑动等,比如点击标签的响应代码如下 var img = document.getElementById('test'); img.onclick = function() { do some

搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内

onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回调,当图片加载完成后执行onload绑定的函数. 给下面一个例子,解释下: document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/avatar.png";

网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odyniec.net/projects/imgareaselect/了解更多的细节. 下面我们就开始使用imgAreaSelect 开始code吧. 第一还是要引用jquery,接着引用下载好的 jquery.imgareaselect.pack.js 文件和 imgareaselect-default.cs

jQuery图片上传前先在本地预览

/**名称:图片上传本地预览插件 v1.1*作者:周祥*时间:2013年11月26日*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;*使用方法: <div><img id="I

web 图片上传实现本地预览

前言: 刚成为码农不久,第一次工作中接触图片上传功能,说到图片上传,大多数程序员可能都是先上传服务器,再获取路径.如果用户多长更改图片,服务器会产生许多垃圾文件.怎样用js实现本地预览.今天特意抽空百度研究了一下. 在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传按钮添加事件.隐藏真正input框.用事件来触发: function imgBtn(

jQuery图片上传前先在本地预览（不经过后端处理）

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

js实现图片上传本地预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content

JQuery插件：图片上传本地预览插件，改进案例一则。

/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img id

js 图片上传本地预览

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传本地预览</title> <style type="text/css"> #preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;