使用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. TZC 1472 逆置正整数，去前导零 (java一句话秒杀)

    逆置正整数 http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=1472 时间限制(普通/Java ...

  2. printf打印

    printf 打印变量(整型,浮点型,双精度型,字符型,字符串类型) 整型: printf("%d",a); 打印出整形变量a 浮点型:printf("%f", ...

  3. Redis_字典

    阅读本文之前要了解的两件事情,第一,Redis是一种Key-Value数据库,第二,字典是一种保存键值对的抽象数据结构.所以不难猜出字典在Redis中应用一定很广泛,实际上,Redis数据库的底层实现 ...

  4. Linux磁盘及文件系统管理 4---- Linux文件系统挂载管理

    1 挂载操作 1 磁盘或者分区需要创建好文件系统后,需要挂载到一个目录才能够使用 2 windows或者是Mac会自动的挂载文件系统,一旦创建好文件系统后会自动的挂载 3 对于Linux来说我们必须要 ...

  5. mysql 参数read_rnd_buffer_size的真正含义

     http://dev.mysql.com/doc/refman/5.7/en/order-by-optimization.html  http://dev.mysql.com/doc/refman/ ...

  6. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

  7. Spring3 Security 中配置会话管理

    账户登录时,要求一个账户同时只能一人登录,配置中的步骤有三个: 1.在web.xml中配置HttpSessionEventPublisher <listener> <listener ...

  8. android MotionEvent中getX()和getRawX()的区别

    public class Res extends Activity implements View.OnTouchListener { Button btn = null; int x = 0; in ...

  9. javaEE学习笔记-单例模式

    定义: 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式的三要素: (1)私有的静态的成员变量 (2)私有的构造方法 (3)公共的静态的入口点方法 单例模式的分类: (1)饿 ...

  10. 【Mood-18】github 使用指南

    windows下使用教程: http://www.cnblogs.com/dongdong230/p/4211221.html repository not found error问题解决(需确定gi ...