<!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. 研磨设计模式解析及python代码实现——(三)适配器模式(Adapter)

    一.适配器模式定义 将一个类的接口转换成另外一个接口,适配器模式使得原本由于接口不兼容,而不能在一起工作的哪些类能够在一起工作. 二.python 实现 import string import cP ...

  2. 筛1-n中每个数的因子（nlogn）

    void get_div() //筛因子 { ; i<maxn; i++) for(int j=i; j<maxn; j+=i) dx[j].push_back(i); }

  3. Ubuntu下Django初体验（三）——django初体验

    Django中的重要概念: 一次web访问的实质: 1. 客户发送http请求到web服务回 2. web服务器返回html页面给客户 Django概述: 1. URL配置             建 ...

  4. zoj3329 One Person Game

    One Person Game Time Limit: 1 Second Memory Limit: 32768 KB Special Judge There is a very simple and ...

  5. Intellij IDEA调试

    这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此. 先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可. 2.开启调试会话 ...

  6. Navicat远程连接MySQL数据库

    1.打开Navicat,在界面的“主机名和IP地址”处输入IP地址,一般是192.168.1.1 2.输入相应的用户名和密码,点击连接测试,确认是否已经连接,之后就可以点击确定了 3.找到相应的数据库 ...

  7. Zend Framework 2参考Zend\Authentication(数据库表认证)

    + 转载自:Zend Framework 2参考Zend\Authentication(数据库表认证) 介绍 Zend\Authentication\Adapter\DbTable提供对存储在数据库表 ...

  8. PowerMock注解PowerMockIgnore的使用方法

    故事要从一个异常开始,某天我在开发一个加密.解密特性,算法使用的是3DES,样例代码如下. package org.jackie.study.powermock; import java.io.Uns ...

  9. MFC ListControl使用方法

    在原来博客中有:MF CListControl 简单功能使用 推荐文章:MFC类CtrlList用法 今天又又一次来介绍点新东西:双击击listcontrol  做出响应.当然你能够做的还有非常多,比 ...

  10. magic_quotes_sybase（魔术引号开关）

    magic_quotes_sybase,如果该选项在php.ini文件中是唯一开启的话,将只会转义%00为\0(即null字符).此选项会完全覆盖magic_quotes_gpc.如果同时开启这两个选 ...