<!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. py3.0第五天,常用模块

    本节大纲: 模块介绍 time &datetime模块 random os sys shutil json & picle shelve xml处理 yaml处理 configpars ...

  2. Desktop Central —— Windows 管理工具

    Desktop Central —— Windows 管理工具 定期维护对于保持系统性能平稳必不可少.诸如磁盘检查.磁盘碎片整理程序之类的工具在系统维护中至关重要.因为管理员很难定期手动执行维护. D ...

  3. C语言闰年问题程序框图

    判定2000-2500年中的每一年是否为闰年,并将结果输出. 先分析闰年成立条件: 1)能被4整除,但不能被100整除的年份都是闰年: (2)能被400整除的年份是闰年: #include<st ...

  4. 欧拉函数-gcd-快速幂（牛客寒假算法基础集训营1-D-小a与黄金街道）

    题目描述: 链接:https://ac.nowcoder.com/acm/contest/317/D来源:牛客网小a和小b来到了一条布满了黄金的街道上.它们想要带几块黄金回去,然而这里的城管担心他们拿 ...

  5. k8s对接ceph存储

    前提条件:已经部署好ceph集群 本次实验由于环境有限,ceph集群是部署在k8s的master节点上的 一.创建ceph存储池 在ceph集群的mon节点上执行以下命令: ceph osd pool ...

  6. 申请的阿里云主机ubuntu系统无法显示中文

    系统ubuntu 16.04,中文的文件名也无法显示,因为中文包没安装,安装如下: sudo apt-get -y install language-pack-zh-hans sudo apt-get ...

  7. Django积木块七——视频

    视频 # 在网上搜索video.js然后下载相关的js和css文件,看文档正确使用视频模块,添加视频外链 <div style="width: 1200px;height: 675px ...

  8. Gitee(码云)、Github同时配置ssh key

    一.cd ~/.ssh 二.通过下面的命令,依次生成两个平台的key $ ssh-keygen -t rsa -C "xxxxxxx@qq.com" -f "github ...

  9. 项目小程序笔记-登录界面+FPGA管脚分配文件生成

    声明:只是为了记录我遇到的一些问题,其中有我理解错的望勿参考. (1)qt designer设计好窗口 主窗口: 登录窗口: 关于qt designer的使用,大可以百度,很简单的,要注意的是部件的参 ...

  10. 强大的jQGrid的傻瓜式使用方法。以及一些注意事项，备有相应的引入文件。

    在介绍我的使用前,先按照国际惯例,列上网址http://blog.mn886.net/jqGrid/ 里面第一项就有相应的demo. 好,进入正题: 在学习到node.js的时候,需要使用到jQGri ...