<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>By：DragonDean</title>
    <script type="text/javascript">
    //下面用于图片上传预览功能
    function setImagePreview(avalue) {
        var docObj = document.getElementById("doc");

        var imgObjPreview = document.getElementById("preview");
        if (docObj.files && docObj.files[0]) {
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '180px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();

            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        } else {
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
    </script>
</head>

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td height="101" align="center">
                    <div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center" style="padding-top:10px;">
                    <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

js上传图片并预览的更多相关文章

  1. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  2. js上传图片前预览方法（支持预览多个图片）

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  3. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  4. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  5. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  6. js本地图片预览

    相信大家都遇到过上传图片之前预览,网上找了很多,但都不是所有浏览器都支持,不过后来找到一个,但自己没有完全实验. 代码如下: <script> //使用IE条件注释来判断是否IE6,通过判 ...

  7. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  8. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  9. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. yum puppet 并整合控制台

    上篇说了下在ubuntu12.04上安装puppet,安装的版本为puppet2.7.11版本,今天尝试了下在CentOS6.4系统上安装puppet 3.1.1版本,本文参考chenshake的文章 ...

  2. head frist 设计模式学习之 JVM中的博物馆奇妙夜（观察者模式）

    博物馆奇妙夜! 博物馆奇妙夜!博物馆奇妙夜!重说三!!!JVM看了<博物馆奇妙夜>电影之后,决定在自己家里开一个博物馆!毕竟需要什么new一下就好,博物馆很快就开起来了,并且任命你为馆长( ...

  3. Netbeans代码配色主题大搜集

    我用netbeans的原因之一就是因为其支持代码配色主题,这是个对于一个代码配色字体控来说是非常重要的一个功能.理所当然的,我也会收集各种配色主题来时常换换口味. 下面就是我目前收集的Netbeans ...

  4. 天涯html&css基础框架

    html申明 对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位. ...

  5. mysql常用的一些命令,用于查看数据库、表、字段编码

    1.查看数据库支持的所有字符集         show character set;或show char set; 2.查看当前状态 里面包括当然的字符集设置         status或者\s ...

  6. 数字集成电路设计-8-一个简单sobel图像边缘检测加速器的设计，实现，仿真与综合

    引言 图像视频处理等多媒体领域是FPGA应用的最主要的方面之一,边缘检测是图像处理和计算机视觉中的基本问题,所以也是最常用的,随着数据量的不断增加以及对实时性的要求,一般软件已经不能满足实际需要,这时 ...

  7. Linux安装Team Service Agent

    (1)下载linux agent文件(在windows中下载后,通过WinSCP复制至linux服务器中) 或者可以在linux直接下载文件(直接下载不会因为网络问题而导致传输中断) 首先使用命令建立 ...

  8. c#+ArcEngine中的IGroupLayer的用法

    转自羊子雄起原文c#+ArcEngine中的IGroupLayer的用法 在AE开发中,我们知道axMapControl.LayerCount能获取图层的数量,但是这种方法不能获取到图层组里面的图层, ...

  9. sql语句书写升降序

    1, desc:降序,明天今天昨天,zyx...cba,.....321 sql语句:select * from SC_BackDiggingInfo where WriteDate<='201 ...

  10. Android 镜像地址[持续更新中]

    这里收集android国内镜像资源地址 大连东软信息学院镜像服务器地址:– http://mirrors.neusoft.edu.cn 端口:80北京化工大学镜像服务器地址:– IPv4: http: ...