使用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. 如何修改meclipse中的默认浏览器

    window------->preferrences------------>general-------------->web browser---------->选择你要使 ...

  2. 给eclipse装一些插件

    最近换了一个环境,需要折腾一个新的eclipse配置,所以在这里记录下. 1.安装marketplace help=>install,输入地址:http://download.eclipse.o ...

  3. HDU 5573 Binary Tree 构造

    Binary Tree 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5573 Description The Old Frog King lives ...

  4. hdu 5591 ZYB's Game 博弈论

    ZYB's Game Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=55 ...

  5. 使用foreach碰到的问题

    foreach($list as $k=>$v ){ ........... } 和下面: foreach($list as &$v){ ........ } 其实两者的结果是一样的,但 ...

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

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

  7. [MEAN Stack] First API -- 3. Select by ID with Mongoose and Express

    Mongoose allows you to easily select resources by ID from your MongoDB. This is an important aspect ...

  8. XCODE多行代码缩进快捷键

    转自:http://xiagudao.com/xcode多行代码缩进快捷键 在XCODE中无法使用TAB键对多行代码进行缩进.想多行缩进,选中需要缩进的代码使用快捷键command(花键)+] 即可右 ...

  9. initrd映像文档的作用和制作

    1.http://pan.baidu.com/s/1dDrGeKL 2.http://wenku.baidu.com/link?url=qPa_jfkEZCbERnwMYWLwm9EZJ_ebMRJA ...

  10. linux的Ubuntu

    一:修改ssh默认端口号 vi /etc/ssh/sshd_config [注意是sshd_config 而且是这个目录下,同时一定要用sudo才能修改,否则不能写入.所以sudo vi /etc/s ...