<!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. Hadoop--Map/Reduce实现多表链接

    MR实现多表连接的原理和单表连接时一样的,甚至比单表连接还要简单. 在map阶段只需要根据文件的名称区分左表还是右表.使用关联的字段作为key2. 在reduce中对values中的值分别存储到一个左 ...

  2. curl伪造ip

    //随机IP function Rand_IP(){ $ip2id= round(rand(, ) / ); //第一种方法,直接生成 $ip3id= round(rand(, ) / ); $ip4 ...

  3. memcpy和strlen函数的实现

    #include <stdio.h> #include <stdlib.h> //malloc()函数 typedef unsigned int size_t; size_t ...

  4. ios xcode如何在控制台打印frame

    进入正题 打开终端输入三条命令: 1. touch ~/.lldbinit 2. echo display @import UIKit >> ~/.lldbinit 3. echo tar ...

  5. chromium截图实现

    声明:本blog是我自己写的,假设要转载,请注明:come from blog of niba! chromium终于显示是在ContentView上.但通过硬件加速.渲染合成的网页之前是在surfa ...

  6. There is an error while getting planid. No Free partitions available

    问题概述 Oracle Advanced Supply Chain Planning最初的设置职责的时候有点问题,不知是不是要打什么补丁或其它配置什么东东,, 这个提示,,但我查到的分区是还有可用分区 ...

  7. JMeter使用记录1 -- JDBC測试

    场景:使用jmeter对web应用和mysql数据库进行压力測试 JMeter是一款很强大的測试工具.能够用来測试web,数据库.从07年用过之后一直对它情有独钟,以下记录下在一个项目中对它的简单使用 ...

  8. careercup-栈与队列 3.3

    3.3 栈就像叠盘子,当盘子叠得太高时,就会倾斜倒下.因此,在真实的世界中,当一叠盘子 (栈)超过了一定的高度时,我们就会另起一堆,再从头叠起.实现数据结构SetOfStacks 来模拟这种情况.Se ...

  9. 【转】jsoncpp在xcode中的使用

    http://blog.csdn.net/ashqal/article/details/8573392 考虑到cocos2dx需要使用jsoncpp做关卡的设置, 尝试用源代码直接放到项目以方便后期生 ...

  10. 基于AFNetworking3.0网络封装

    概述 对于开发人员来说,学习网络层知识是必备的,任何一款App的开发,都需要到网络请求接口.很多朋友都还在使用原生的NSURLConnection一行一行地写,代码到处是,这样维护起来更困难了. 对于 ...