<!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. 大面积project.pbxproj冲突问题解决

    在团队开发中,经常会有project.pbxproj的冲突出现. 所以我们添加过新的文件后,要及时的提交,养成好习惯.以免出问题. 但是总有一些时候忘记提交出现大面积的冲突,然后把==== <& ...

  2. 唉 调皮的ListView

    唉 调皮的ListView 本次任务是 运用LisTView和自定义Adapter 来实现资料以列表的形式展现 来看代码 *** 布局代码老规矩 直接贴上 <LinearLayout andro ...

  3. centos7.5搭建cdh5.13.0

    序言 本文集群搭建为三台机器,cdh版本为5.13.0,以下是安装过程中所用到的软件包等,可以自行下载.一.前期准备1.安装环境 系统:centos7.5/最小安装版本/64位 内存:主节点 --&g ...

  4. Python Day 10

    阅读目录: 函数 函数的使用 函数的分类 函数的返回值 ##函数 ##函数的定义-----what?----什么是函数: # 函数:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就 ...

  5. affiliate的使用方式

    什么是affiliate https://www.zhihu.com/question/24262490 通俗的理解就是,我们寻找合作伙伴,让合作伙伴帮忙做宣传,我们会根据他们的宣传力度发放相关的奖励 ...

  6. sql语句创建数据表

    unsigned 数值类型 无符号化 AUTO_INCREMENT 自增长 PRIMARY KEY 唯一主键 COMMENT 备注信息 BIT 类型只有1和0两个值 enum 枚举数值类型 UNIQU ...

  7. font-size:0的妙用，用于解决inline或者inline-block造成的间隙

    1.图片间的缝隙(图片间的间隙一般是由换行.缩进造成的) <div> <img src="1.jpg"> <img src="2.jpg&q ...

  8. 关于Data URI

    [新增]:http://www.webhek.com/post/data-url.html 引子:在研究FileReader时,有个方法readAsDataURL;然后看到打印出来的东西类似于如下:[ ...

  9. 值得推荐的C/C++框架和库 (真的很强大)〔转〕

    http://m.blog.csdn.net/article/details?id=42541419

  10. 基于IP的docker private registry 私有仓库的搭建

    鉴于国内的网络环境,如果公司内部大量使用docker,镜像上传下载将是个非常耗时的工作,搭建一个私有仓库可以很好的解决自有镜像的存储,如果你在私有网络,不能使用域名的话,那么本文可以作为一个很好的例子 ...