<!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. 第九周助教工作总结——NWNU李泓毅

    1.助教博客链接: https://www.cnblogs.com/NWNU-LHY/ 2.作业要求博客链接: https://www.cnblogs.com/nwnu-daizh/p/1072688 ...

  2. bootstrap的引用和注意事项

    1,在https://v3.bootcss.com/getting-started/#download下载bootstrap的压缩包: 2,将压缩包解压到自己的工程文件中,会得到如下结果: 3,打开这 ...

  3. JavaScript基础视频教程总结（091-100章）

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

  4. python学习第四天笔记整理

    一.迭代器及生成器 #迭代器:迭代的工具 #1 什么是迭代:指的是一个重复的过程,每一次重复称为一次迭代,并且每一次重复的结果是下一次重复的初始值# while True:# print('===== ...

  5. Python开发系列

    一  Python基础理论 Python简介 数据类型 字符编码与文件操作 函数 模块与包 常用模块 面向对象 网络编程 相关代码示例参考 https://github.com/Jonathan131 ...

  6. email program （客户端）演变过程有感

    以下内容全部为个人读后感(参考百度百科的相关资料) 首先我认为电子邮件是一个非常伟大的发明,它不仅成本低,而且传输效率快! 关于它的起源,我从百度百科中看到了两种说法     1.1969年10月世界 ...

  7. 微服务中Feign快速搭建

    在微服务架构搭建声明性REST客户端[feign].Feign是一个声明式的Web服务客户端.这使得Web服务客户端的写入更加方便 要使用Feign创建一个界面并对其进行注释.它具有可插入注释支持,包 ...

  8. Java工程师如何在1个月内做好面试准备？

    作者:石杉的架构笔记 写在前面 春节长假转眼已过,即将迎来的是一年一度的金三银四跳槽季. 假如你准备在金三银四跳槽的话,那么作为一个Java工程师,应该如何利用1个月的时间,快速的为即将到来的面试进行 ...

  9. Ubuntu18.04 VMwareTools安装方法

    sudo apt-get upgradesudo apt-get install open-vm-tools-desktop -y sudo reboot 一.VMwareTools的一些实用性   ...

  10. 服务器端PHP允许跨域

    解决跨域的关键是设置 Access-Control-Allow-Origin. 例如:客户端的域名是 api.itbsl.com,而请求的域名是www.itbsl.com 如果直接使用ajax访问,会 ...