<!DOCTYPE html>

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

<head>

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

    <title>js实现浏览图片预览</title>

    <style type="text/css">

        body {

        }

        a, img {

            border: 0;

        }

        .button {

            background-color: #0075AC;

            border-radius: 20px;

            color: #FFF;

            font-family: "微软雅黑";

            font-size: 14px;

            height: 30px;

            line-height: 30px;

            padding: 0 15px;

            display: inline-block;

            text-decoration: none;

        }

        .file {

            width: 0px;

            height: 0px;

            overflow: hidden;

            position:absolute;

            left:-100px;

            top:-100px;

            z-index:-999;

        }

        #filelist {

            min-height: 30px;

            height: auto;

            /*border: 1px solid #c9c9c9;*/

            margin: 5px 0;

        }

            #filelist img {

                margin: 5px 0 5px 5px;

            }

    </style>

    <script type="text/javascript">

        //预览图片

        function previewImage(file) {

            //标准浏览器,FF、谷歌

            if (file["files"] && file["files"][0]) {

                var reader = new FileReader();

                reader.onload = function (evt) {

                    document.getElementById('img1').src = evt.target.result;

                }

                reader.readAsDataURL(file.files[0]);

            }

                //IE

            else {

                file.select();

                var path = document.selection.createRange().text;

                document.getElementById('img1').src = path;

            }

        }

        //选择图片

        function selectImage() {

            document.getElementById('file1').click();

        }

        //开始上传,这个只适用于我们.NET,上传你暂时用不了

        function startUpload() {

            var _file1 = document.getElementById("file1");

            var _url = "_upload.aspx";

            var formData = new FormData();

            formData.append("file", _file1.files[0]);

            var _request = new XMLHttpRequest();

            _request.open("post", _url, true);

            _request.onload = function (response) {

                var name = response.currentTarget.responseText;

                alert(name);//返回上传文件名,失败返回空

            }

            _request.send(formData);

        }

    </script>

</head>

<body>

    <input id="file1" type="file" onchange="previewImage(this)" class="file" />

    <a href="javascript:selectImage()" class="button">选择图片</a>

    <a href="javascript:startUpload()" class="button">上传文件</a>

    <div id="filelist">

        <img src="" width="100" height="70" id="img1" alt="" />

    </div>

</body>

</html>

以上个人验证过，可用！

图片预览(适用于IE6,9,10，Firefox)的更多相关文章

  1. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  2. 适用于各浏览器支持图片预览，无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  3. 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...

  4. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  5. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  6. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  7. javascript 实现图片预览（未上传到服务器端）

    1,图片预览 越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦.有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览.但这不是最佳实现方案,如果用户一 ...

  8. 通过file文件选择图片预览功能

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

  9. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

随机推荐

  1. Struts2内建拦截器

    params拦截器 负责将请求参数设置为Action属性 staticParams拦截器 将配置文件中action元素的子元素param参数设置为Action属性 servletConfig拦截器 将 ...

  2. Python Day 6

    阅读目录:   内容回顾:   深浅拷贝:   元组:   字典   集合 ##内容回顾 #1.数字类型 int | float | bool | complex #2.字符串 #常规操作: -- 索 ...

  3. Python小技巧：运行目录或ZIP文件

    在写Python程序时,将不同功能代码写在不同文件中是一个好习惯,但是对于某些情况.如需要将脚本提供给别人运行使用,如若将程序写在几个文件中,则需要将文件都发给他人.别人就需要管理不同文件,这样对于别 ...

  4. 我的Unity学习笔记之——Unity中从网站下载ab资源+下载存储一条龙

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Net ...

  5. C++标准库之string返回值研究

    先说结论(不一定适用所有环境): 1) GCC默认开启了返回值优化(RVO),除非编译时指定“-fno-elide-constructors”: 2) 现代C++编译器一般都支持返回值优化: 3) s ...

  6. 2019浙大校赛--E--Potion（签到水题）

    一丢丢思维就ok 题目大意: 魔法师要煮药,有n个等级的药,所需要的药物为a1,a2...an,意为第n级需要多少药物,下一行为库存的不同等级药物,药物可降级使用不可升级. 思路:从高级药物开始解,把 ...

  7. jquery1.6中的.prop()和.attr()异同

    jquery jQueryHTML5JavaScript浏览器ITeye  最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop( ...

  8. dell T130服务器加内存

    需求:客户一台dell T130塔式服务器,由于本机只有一条8G内存,系统运行比较慢,需要再增加一条8G内存. 增加过程:第一次增加时由于没有注意机器上内存频率是2133的,所以新增加的一条2400频 ...

  9. java.lang.OutOfMemoryError: PermGen space （jvm内存泄漏解决办法）

    2.在myeclipse根目录 打开myeclipse.ini 3.在myeclipse中配置内存

  10. Openvswitch手册(8): ovs-vsctl的DB的操作

    ovs-vsctl的DB的操作 如果你在命令行里面找不到相应的命令创建和删除对象,则可以直接删除数据库 [−−if−exists] [−−columns=column[,column]...] lis ...