之前的博文有实现过图片上传预览，但那种方法是预览时就将图片上传，会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览，就说用js将上传的图片显示，上传代码在之前的博文中有写到。

以下是实现的代码：

大体上前台预览有两种，第一种是把图片在浏览器上做缓存，然后获取缓存地址；第二种是将图片转换为base64 字符串。


一、将图片在浏览器上做缓存

body：

<table width="100%" border="0" cellspacing="0" cellpadding="0">

			<tbody>

				<tr>

					<td height="101" align="center">

						<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>

					</td>

				</tr>

				<tr>

					<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>

				</tr>

			</tbody>

		</table>

　　

js：

function setImagePreview(avalue) {

				var docObj = document.getElementById("doc");

				var imgObjPreview = document.getElementById("preview");

				if(docObj.files && docObj.files[0])

				{

					//火狐下，直接设img属性

					imgObjPreview.style.display = 'block';

					imgObjPreview.style.width = '150px';

					imgObjPreview.style.height = '180px';

					//imgObjPreview.src = docObj.files[0].getAsDataURL();

					//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

					imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

				}

				else

				{

					//IE下，使用滤镜

					docObj.select();

					var imgSrc = document.selection.createRange().text;

					var localImagId = document.getElementById("localImag"); //必须设置初始大小

					localImagId.style.width = "150px";

					localImagId.style.height = "180px"; //图片异常的捕捉，防止用户修改后缀来伪造图片

					try {

						localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

						localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

					} catch(e) {

						alert("您上传的图片格式不正确，请重新选择!");

						return false;

					}

					imgObjPreview.style.display = 'none';

					document.selection.empty();

				}

				return true;

			}

　　

这样就实现了图片的预览。

二、将图片转换为base64格式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form enctype="multipart/form-data" method="post" action="/file/upload">

    <input  onchange="previewImage(this, 'prvid')" type="file" name="file"/>

    <input type="submit" value="上传"/>

</form>

<div id="prvid">预览容器</div>

</body>

<script type="text/javascript">

    function previewImage(file, prvid) {

        /* file：file控件

         * prvid: 图片预览容器

         */

        var tip = "Expect jpg or png or gif!"; // 设定提示信息

        var filters = {

            "jpeg" : "/9j/4",

            "gif" : "R0lGOD",

            "png" : "iVBORw"

        }

        var prvbox = document.getElementById(prvid);

        prvbox.innerHTML = "";

        if (window.FileReader) { // html5方案

            for (var i = 0, f; f = file.files[i]; i++) {

                var fr = new FileReader();

                fr.onload = function(e) {

                    var src = e.target.result;

                    if (!validateImg(src)) {

                        alert(tip)

                    } else {

                        showPrvImg(src);

                    }

                }

                fr.readAsDataURL(f);

            }

        } else { // 降级处理

            if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {

                alert(tip);

            } else {

                showPrvImg(file.value);

            }

        }

        function validateImg(data) {

            var pos = data.indexOf(",") + 1;

            for ( var e in filters) {

                if (data.indexOf(filters[e]) === pos) {

                    return e;

                }

            }

            return null;

        }

        function showPrvImg(src) {

            var img = document.createElement("img");

            img.src = src;

            prvbox.appendChild(img);

        }

    }

</script>

</html>

　　

JS实现的图片预览功能的更多相关文章

  1. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  3. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  4. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  5. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  7. 34)django-上传文件,图片预览功能实现

    目录 文件上传      1)form表单提交上传(会刷新)      2)ajax上传      3)iframe      4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...

  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. 出现”/var/lib/mysql/mysql.sock“不存在的解决方法

    这种情况大多数是因为你的mysql是使用rpm方式安装的,它会自动寻找 /var/lib/mysql/mysql.sock 这个文件,通过unix socket登录mysql.常见解决办法如下:1.创 ...

  2. php 有时候难以输出显示的信息可以用ob缓冲区来做

    有时候一些难以打印的信息可以通过缓冲区来做,比如手机扫码上的信息看不到这种, 当然也可以通过fiddler来抓包,也可以看到这些信息,直接上代码: <?php ob_start(); //开启缓 ...

  3. 2014年将会受欢迎的IT技能--你有多少哪？

    据国外媒体报道,据Global Knowledge等十几家研究机构发布的2014年IT技能和薪金调查报告显示,2014年最受欢迎的十大IT技能如下: 1.编程与应用开发 据美国劳工统计局称,开发者和程 ...

  4. [hdu1277]全文检索(AC自动机)

    解题关键:AC自动机模板题,注意字符匹配时若无法匹配,直接用%s即可. #include<bits/stdc++.h> using namespace std; typedef long ...

  5. A - Toy Cars

    Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description Little ...

  6. Volley Cache机制分析

    1.http缓存机制 要弄明白volley缓存机制,那么肯定是和浏览器的缓存机制有关了,简单来说volley整套框架要做的事都是模拟浏览器来进行一次次的http交互 1.1.概述 http缓存的是指当 ...

  7. Android开发相关工具（eclipse篇）

    ADT 安装该工具后才能配置Android SDK包,使可以在eclipse里开发Android程序 AVD Android模拟器管理工具,创建删除Android模拟器 SDK Manager And ...

  8. Ogre 学习记录

    http://www.cppblog.com/richardhe/articles/55722.html 1: 设计初衷 它设计初衷是完全跨平台的.抽象的接口隐藏了平台相关的细节. 它设计初衷是大幅度 ...

  9. IT兄弟连 JavaWeb教程 JSP语法

    在JSP页面中,脚本标识使用的最为频繁,因为他们能够方便.灵活地生成页面中的动态内容,特别是JSP程序代码块.JSP中的脚本标识包括3部分,即JSP声明区.JSP表达式和JSP程序代码块.通过这些标识 ...

  10. suse 11入门学习

    1 去掉显示隐藏文件的默认配置 vi /etc/bash.bashrc 找到 ; then LS_OPTIONS="-A -N $LS_OPTIONS -T 0" else LS_ ...