1，图片预览

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

2，代码（以下代码兼容主流浏览器，请放心使用）

<!DOCTYPE html>

<html>

<head>

<title>图片预览</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">

<meta name="description" content="this is my page">

<meta name="content-type" content="text/html; charset=UTF-8">

<style type="text/css">

#main {

    width: 900px;

    height: 600px;

    margin: 10px auto 0;

}

#preview_text {

    width: 900px;

    height: 40px;

}

#preview_wrapper{

    width: 900px;

    height: 500px;

    border: 1px solid gray;

}

</style>

<script type="text/javascript">

var DIV_ID = "preview";// div

var PREVIEW_ID = "preview_wrapper";

var PIC_WIDTH = 900;// 展示图片的宽度

var PIC_HEIGHT = 500;// 展示图片的高度

var FILE_NAME = "fileName";

var IMAGE_FILE = "imageFile";

function $$(id){// 为了方便起见，统一定义一个函数

    return document.getElementById(id);

}

function toShowPic(){

    doPreview();

    setImageName();

}

// 设置图片名称

function setImageName(){

    var name = $$(IMAGE_FILE).value;

    $$(FILE_NAME).value = name.substring(name.lastIndexOf('\\')+1,name.lastIndexOf("."));

}

    // 预览

function doPreview(){

    var sender = $$(IMAGE_FILE);

    var allowExtention = ".jpg,.bmp,.gif,.png";// 图片支持的格式

    var extention = sender.value.substring(sender.value.lastIndexOf(".") + 1).toLowerCase();// 文件的扩展名

    var browserVersion = window.navigator.userAgent.toUpperCase();// 浏览器版本

    if(allowExtention.indexOf(extention)!=-1){// 包含指定的几种文件类型

        if (browserVersion.indexOf("MSIE") > -1) {// IE 浏览器

            if (browserVersion.indexOf("MSIE 6.0") > -1) {// ie6

                $$(DIV_ID).setAttribute("src",sender.value);

            } else {// ie[7-8]、ie9

                sender.select();

                var newPreview = $$(PREVIEW_ID+ "New");

                if (newPreview == null) {

                    newPreview = document.createElement("div");

                    newPreview.setAttribute("id", PREVIEW_ID + "New");

                    newPreview.style.width = PIC_WIDTH;

                    newPreview.style.height = PIC_HEIGHT;

                    newPreview.style.border = "solid 1px gray";

                }

                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+ document.selection.createRange().text + "')";

                var tempDivPreview = $$(PREVIEW_ID);

                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);

                tempDivPreview.style.display = "none";

            }

        }else if (browserVersion.indexOf("FIREFOX") > -1) {// 火狐浏览器

            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);

            if (firefoxVersion < 7) {// firefox7以下版本

                $$(PREVIEW_ID).setAttribute("src",sender.files[0].getAsDataURL());

            } else {//firefox7.0+

                $$(DIV_ID).setAttribute("src",window.URL.createObjectURL(sender.files[0]));

            }

        }else if (sender.files) {

            //兼容chrome、火狐等，HTML5获取路径

            if (typeof FileReader != "undefined") {

                var reader = new FileReader();

                reader.onload = function(e) {

                    $$(DIV_ID).setAttribute("src", e.target.result);

                    $$(DIV_ID).setAttribute("width", PIC_WIDTH);

                    $$(DIV_ID).setAttribute("height", PIC_HEIGHT);

                };

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

            } else if (browserVersion.indexOf("SAFARI") > -1) {

                alert("暂时不支持Safari浏览器!");

            }

        }else {

            $$(PREVIEW_ID).setAttribute("src",sender.value);

        }

    }else{

        sender.value = ""; // 清空选中文件

        $$(FILE_NAME).value="";

        alert("仅支持以"+allowExtention+"为后缀的文件!");

        if (browserVersion.indexOf("MSIE") > -1) {// IE浏览器

             sender.select();

             document.selection.clear();

        }

        sender.outerHTML = sender.outerHTML;

    }

}

</script>

</head>

<body>

<div id="main">

    <div id="preview_text" class="preview_text">

        选择文件 : <input type="file" name="imageFile" id="imageFile" onChange="toShowPic()"/>

        文件名 : <input type="text" name="fileName" id="fileName" value=""/>

    </div>

    <div id="preview_wrapper">

        <img id="preview" src="image/blank.gif" /><br/><!-- 图片占位符 -->

    </div>

</div>

</body>

</html>

3，示例图

javascript 实现图片预览（未上传到服务器端）的更多相关文章

  1. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  2. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  3. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  5. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  6. vue组件利用formdata图片预览以及上传《转载》

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  7. vue组件利用formdata图片预览以及上传

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  8. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  9. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

随机推荐

  1. Winfrom强大的自动更新程序

    推荐一:.Net 小型软件自动更新库(SimpAutoUpdater) http://www.fishlee.net/soft/simple_autoupdater/usage.html 下载地址:h ...

  2. 赵雅智_ContentProvider

    ContentProvider介绍 ContentProvider是不同应用程序之间进行交换数据的标志API 也就是说:一个应用程序通过ContentProvider暴露自己的数据操作接口,那么无论该 ...

  3. ubuntu 15.04开放mysql远程连接

    首先查看端口是否打开 netstat -an|grep 3306 此图为开启3306端口的截图,之前显示为. . . 127.0.0.1:3306 . . . 打开mysql配置文件vi /etc/m ...

  4. Codeforces Round #329 (Div. 2) A. 2Char 暴力

    A. 2Char Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/593/problem/A De ...

  5. bzoj 4300: 绝世好题 dp

    4300: 绝世好题 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem.php ...

  6. 数据恢复软件使用经验-支持U盘，手机SD卡，硬盘数据，解决图片恢复后打不开的问题

    数据恢复软件使用经验-支持U盘,手机SD卡,硬盘数据.解决图片恢复后打不开的问题. 用过非常多数据恢复软件.最早EasyRecovery pro.恢复过U盘.手机SD卡,硬盘数据.但如今下载不了最新版 ...

  7. 高级I/O之readv和writev函数

    readv和writev函数用于在一次函数调用中读.写多个非连续缓冲区.有时也将这两个函数称为散布读(scatter read)和聚集写(gather write). #include <sys ...

  8. C++_归并排序（纯C版）

    #include <iostream> #include <stdlib.h> using namespace std; int compared(const void *ke ...

  9. 使用Loadrunner进行接口测试

    在工作中很多时候都需要进行接口测试,如果只是进行接口的功能测试这个很简单,两种类型: 1.如果是基于get的直接使用浏览器进行访问,查看服务器返回的数据是否正确就行, 2.如果是基于post的可以接触 ...

  10. 初始tornado框架

    2.7版本的一个简单的框架 from wsgiref.simple_server import make_server def new(): return 'new' def index(): ret ...