<!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. JAVA经典算法50题（转）

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/51097928 JAVA经典算法50题 [程序1]   题目:古典问题:有一对兔子, ...

  2. mysql正则表达式无法识别\d

    无法识别\d 修改为[0-9]就ok

  3. Jquery动态添加/删除表格行和列

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

  4. shell搭建CentOS_7基础环境

    #!/bin/bash#Auth:Darius#CentOS_7配置实验环境eno=`ifconfig|awk '{print $1}'|head -1|awk -F ":" '{ ...

  5. 算法学习笔记：knn理论介绍

    阅读对象:了解指示函数,了解训练集.测试集的概念. 1.简介 knn算法是监督学习中分类方法的一种.所谓监督学习与非监督学习,是指训练数据是否有标注类别,若有则为监督学习,若否则为非监督学习.所谓K近 ...

  6. 初识Java Servlet

    Java Servlet是什么? Servlet的本质就是一个Java接口,之所以能生成动态的Web内容,是因为对客户的一个HTTP请求,Servlet通过接口这个规范重写了其中的方法,然后Web服务 ...

  7. parrot os 安装后更改更新源

    parrot os 安装后 parrot os 自带的更新源更新速度太慢(需要几个小时) 提供如下更新源 中国 USTC(中国科学技术大学和USTCLUG) - 合肥大学 CMCC 1 Gbps Ce ...

  8. shell脚本颜色输出（实例未编辑）

    颜色输出通过echo 输出,需要加-e echo -e "\033[背景颜色;字体颜色\033[0m" 背景颜色 40 设置黑色背景 41 设置红色背景 42 设置绿色背景 43 ...

  9. js实现图片查看器（图片的缩放、旋转、拖拽）

    一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...

  10. springboot 不同环境切换不同的配置文件

    开发的流程是本地>测试>预发布>正式,所以不同的环境,肯定是不同的配置文件,所以我们需要针对不同的环境做不同的配置切换. 下面我们来说说 springboot 是怎么来切换的: 1. ...