<!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. openstack libtray

    OpenStack packages¶ Distributions release OpenStack packages as part of the distribution or using ot ...

  2. YII 小模块功能

    //1,使用updateCounters()来更新计数器字段. Book::model()->updateCounters(array('download_count'=>1),':id= ...

  3. hdoj 1201 18岁生日

    18岁生日 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  4. java使用batik转换svg文件

    svg是一种矢量图片格式,用来保存高保真的图片.我们可以用编辑器打开svg,我们可以看到svg文件其实就是一个xml文件,这种文件浏览器也可以识别.因此要查看svg用现成的浏览器就可以了.值得庆幸的是 ...

  5. AndroidHttp通信 HTTP Client与HttpURLConnection的区别

    Apache HTTP Client DefaultHttpClient 以及其相关类AndroidHttpClient 适用于 web browsers, 他们是可扩展的,并且拥有大量的稳定APIs ...

  6. Linux Foundation Secure Boot System Released

    As promised, here is the Linux Foundation UEFI secure boot system.  This was actually released to us ...

  7. final、抽象类、接口、多态、

       final———最终.作为一个修饰符 可以修饰类. 函数. 变量: 被final修饰的类不可以被继承: 被final修饰的方法不可以被重写: 被final修饰的变量只能够被赋值一次,既可以修饰成 ...

  8. centos防火墙操作

    centos防火墙基本操作 #/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT#/sbin/iptables -I INPUT -p tcp -- ...

  9. android84 广播接受者

    #广播接收者(广播接受者进程关闭了也能接收到广播,系统会在清单文件中找哪个广播接受者可以收到这条广播,然后去启动这个接受者的进程,找不到则广播发了就发了没人收到而已) * 现实中:电台要发布消息,通过 ...

  10. mybatis13 resultMap

    resultMap(入门) resultType :指定输出结果的类型(pojo.简单类型.hashmap..),将sql查询结果映射为java对象 . 使用resultType注意:sql查询的列名 ...