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

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片上传</title>

<script src="test.js" language="javascript"></script>

</head>

<body>

     <input type="file" name="doc" id="doc" onchange="setImagePreview('doc','preview','localImag');"/>

     <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>

</body>

</html>
function setImagePreview(fileObj, previewObj, localImg) {

    var docObj=document.getElementById(fileObj);

    var imgObjPreview=document.getElementById(previewObj);

    if(docObj.files && docObj.files[0]){

        //火狐下，直接设img属性

        imgObjPreview.style.display = 'block';

        imgObjPreview.style.width = '120px';

        imgObjPreview.style.height = '80px';

        //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(localImg);

        //必须设置初始大小

        localImagId.style.width = "120px";

        localImagId.style.height = "80px";

        //图片异常的捕捉，防止用户修改后缀来伪造图片

        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;

}

上传图片带预览功能兼容IE和火狐等主流浏览器的更多相关文章

  1. Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

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

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

  3. nodejs实现本地上传图片并预览功能（express4.0+）

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

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

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

  5. [转]单据套打WINFORM实现，带预览功能

    本文转自:https://blog.csdn.net/lyflcear/article/details/22795053 昨天公司要打单子而不是以前的手写 为了实现这样的功能上网搜索了一下 http: ...

  6. html上传图片的预览功能实现

    表单代码(仅取上传文件部分): <input class="selectImg" style="position:absolute;opacity: 0;width ...

  7. jquery 上传图片即时预览功能

    <script type="text/javascript">        jQuery.fn.extend({            uploadPreview: ...

  8. URL.createObjectURL() 实现本地上传图片 并预览功能

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  9. 模拟微信上传图片（带预览，支持预览gif）

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

随机推荐

  1. hdoj 4006 The kth great number【优先队列】

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  2. 最小生成树之算法记录【prime算法+Kruskal算法】【模板】

    首先说一下什么是树: 1.只含一个根节点 2.任意两个节点之间只能有一条或者没有线相连 3.任意两个节点之间都可以通过别的节点间接相连 4.除了根节点没一个节点都只有唯一的一个父节点 5.也有可能是空 ...

  3. JAVA 调用Axis2 code generator 生成的webservice

    以下代码为调用 JAVA 调用Axis2 code generator 生成的webservice的代码. package test; import java.rmi.RemoteException; ...

  4. storm的acker机制理解

    转载请注明原创地址http://www.cnblogs.com/dongxiao-yang/p/6142356.html Storm 的拓扑有一些特殊的称为"acker"的任务,这 ...

  5. storm spout的速度抑制问题

    转发请注明原文地址:http://www.cnblogs.com/dongxiao-yang/p/6031398.html 最近协助同事优化一个并发消费kafka数据用来计算的任务,压测过程中发现有两 ...

  6. Java appendReplacement 和 appendTail 方法

    Matcher 类也提供了appendReplacement 和appendTail 方法用于文本替换: 看以下的样例来解释这个功能: import java.util.regex.Matcher; ...

  7. android 嵌套 apk 从一个apk启动另外一个apk

    a.apk-主应用  b.apk-被启动应用 主要思想:把b.apk放到assets目录下,由于有大小限制(1M),所以改名成b.mp3(因为mp3,jpg,png,mp4等不会检查,不会限制大小), ...

  8. spring beans源码解读之--bean definiton解析器

    spring提供了有两种方式的bean definition解析器:PropertiesBeanDefinitionReader和XmLBeanDefinitionReader即属性文件格式的bean ...

  9. Base64工具类

    public final class AbBase64 { /** The Constant base64EncodeChars. */ private static final char[] bas ...

  10. centos 安装mysqldb 记录

    vim setup_pofix.py #修改mysql_config路径 <pre> ln -s /usr/local/mysql/lib/libmysqlclient.so.18 /us ...