<!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. dell vfoglight

    vFoglight针对RH/Vmware/Hyper-v/Vsphere环境的相关软件包下载链接 https://software.dell.com/register/getfile/?param=2 ...

  2. springMVC源码浅析

    因故,需要学习springmvc,现在demo已经跑起来.列文分析springmvc并简单对比struts2. springmvc的核心对象dispatcherServlet.struts2的核心对象 ...

  3. C语言宏与单井号（#）和双井号（##）

    C(和C++)中的宏(Macro)属于编译器预处理的范畴,属于编译期概念(而非运行期概念).下面对常遇到的宏的使用问题做了简单总结.关于#和##在C语言的宏中,#的功能是将其后面的宏参数进行字符串化操 ...

  4. WPF DataGrid 合并单元格

    在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...

  5. [Angular 2] 8. Better ES5 Code

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. [WebGL入门]十四，绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  7. 启动hadoop，报错Error JAVA_HOME is not set and could not be found

    报如错误:JAVA_HOME is not set and could not be found,可能是因为JAVA_HOME环境没配置正确,还有一种情况是即使各结点都正确地配置了JAVA_HOME, ...

  8. java 窗口的一些示例代码，可直接运行

    代码链接如下: http://pan.baidu.com/s/1gdlCI4N 有应用SWING,也有应用AWT,可视情况而定. 窗口程序运行需要jdk1.7环境(测试可用).

  9. VC++/MFC操作ini配置文件详解

    在我们写的程序当中,总有一些配置信息需要保存下来,以便完成程序的功能,最简单的办法就是将这些信息写入INI文件中,程序初始化时再读入.具体应用如下: 一.将信息写入.INI文件中. 1.所用的WINA ...

  10. Java基础知识强化之IO流笔记33：转换流之InputStreamReader的使用

    1. InputStreamReader的使用 InputStreamReader(InputStream is):用默认的编码读取数据 InputStreamReader(InputStream i ...