使用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. HTTP状态码通常分为5种类型

    HTTP状态码通常分为5种类型,分别以1-5五个数字开头,由3位整数组成: -------------------------------------------------------------- ...

  2. 在ASP.NET中支持断点续传下载大文件(ZT)

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag         客户端每次提交 ...

  3. jQuery打印Html页面自动分页

    最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件 用法: $("div#printmain").printArea(); 但还 ...

  4. echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端

    1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧. 就以官网最简单的那个小demo来做修改吧.官网上的小de ...

  5. THD 变量存入threads中

    http://blog.csdn.net/gapaul/article/details/12047497 http://ourmysql.com/archives/930

  6. Qt界面美化 QSS

    目前发现在Qt-Design中右击控件,可以选择Change StyleSheet ------------------------以下总结不太对 刚接触Qt,发现Qt Design无法对每个控件进行 ...

  7. demo virdata 虚拟数据

    $pageCurr = I('p',1);        $start = ($pageCurr-1) * self::PAGE_RECORD_SCAN;        $sort  = I('sor ...

  8. CF 335A(Banana-贪心-priority_queue是大根堆)

    A. Banana time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  9. uboot 网络不通问题解决一例1

    平台:Hi3531 PHY:RTL8211 现象:在uboot中执行ping命令的时候,总是超时. 过程: 使用uboot自带的phy操作命令mii读出的数据全是0xff.这里要介绍一下uboot中的 ...

  10. C# 之 user32函数库

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...