使用Javascript之图片上传预览，我们无需上传到服务器中，兼容所有浏览器。

关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来生成本地图片预览图的。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0;" name="viewport" />
<style type="text/css">
#preview, .img, img
{
width:500px;
height:500px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
}
else
{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>

//

Javascript之图片上传预览的更多相关文章

  1. 【JavaScript】图片上传预览

    上传文件实时显示[一张图片]: 个人理解:给img的src传值:这个值就是input[type='file']的value: 不过你要判断浏览器类型[很多]:IE6.0,IE7/8/9,Fixfox7 ...

  2. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  3. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  4. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  5. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  6. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  8. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

随机推荐

  1. 让python整型计算结果为浮点型

    这是个入门知识,我记录下. 在python中,默认情况下,如果表达式中全是整型,结果也会仅仅是整型.有时候没注意会出现意想不到的结果,比如: >>> a = 7 >>&g ...

  2. jquery 预览提交的表单

    预览表单,查看后确认提交或者返回重填 演示 XML/HTML Code <form class="mform" id="myform" method=&q ...

  3. IOS 7 Study - Manipulating a Navigation Controller’s Array of View

    ProblemYou would like to directly manipulate the array of view controllers associated with aspecific ...

  4. Codeforces Gym 100531G Grave 水题

    Problem G. Grave 题目连接: http://codeforces.com/gym/100531/attachments Description Gerard develops a Ha ...

  5. MySQL 5.7.13解压版安装记录 mysql无法启动教程

    1 解压缩 2 添加环境变量,这个不细说了 我的电脑->属性->高级->环境变量 选择PATH,在其后面添加: 你的mysql bin文件夹的路径 (如:C:\Program Fil ...

  6. 使用PageHeap.EXE或GFlags.EXE检查内存越界错误 （转）

    2011-05-27 20:19 290人阅读 评论(0) 收藏 举报 microsoftdebuggingstructureoutputimagefile 必先利其器之一:使用PageHeap.EX ...

  7. accept函数

    accept()函数 系统调用 accept() 会有点古怪的地方的! 你能够想象发生 这种事情:有人从非常远的地方通过一个你在侦听 (listen()) 的port连接 (connect()) 到你 ...

  8. 【React Native 实战】微信登录

    1.前言 在今天无论是游戏开发还是app开发,微信作为第三方登录必不可少,今天我们就用react-native-wechat实现微信登录,分享和支付同样的道理就不过多的介绍了. 2.属性 1)regi ...

  9. [转]SQL快速入门

    原文出处:http://blog.csdn.net/xxd851116/article/details/5688263 一.基础 1.说明:创建数据库CREATE DATABASE database- ...

  10. IOS 开发过程中的 消息通知 小红点

    大致分为两种方法:系统方法和自定义方法 系统方法: 系统自带的方法可以显示具体的消息数量,这个就是苹果设备常见的小红点.实现思路如下: NSArray *tabBarItems = self.navi ...