最近是被这项目搞疯了。害我天天写插件，上周才写，现在就继续吧.....

说说这个吧。主要是用于本地图像预览的。我们知道在以前，图像预览一般都很麻烦，一般都是异步上传然后返回路径，动态设置路径，但是这样的效率不言而喻，而使用这种技术一般情况下，就是flash、silverlight或者是三方axtiveX插件了，而这些技术一般都很难实现跨平台、跨浏览器、跨设备的情况，而且表现不一，从另一个方面来说，这种技术是web依赖了第三方，不通用。而自从HTML5诞生以来，这样的思路就被打破了。HTML5提供了本地文件，HTML5的File API提供我们读取本地文件。也对本地文件的操作进行了标准化。

Html5的File API我就不介绍，不知道的网络有一堆的文章。

看看自己实现的插件效果吧。

先提供下载地址吧。http://url.cn/N1k46L

说一下这个插件：浏览器需要支持HTML5，并且是基于Jquery的。

介绍下使用方法吧

1）初始化使用

1
2
//参数：dragDivId,拖拽DIV；fileId，文件选择控件ID
var     lpi = new localPerviewImg("dragfile", "file1");

2）获取预览的数据

1
2
//参数说明：如果为true，则截断标记子串返回可解析的Base64字符串，如果为false，则源数据返回，
lpi.getBase64ImageData(false)；

如果参数为false的话也可以像如下调用：

1
lpi.Base64ImageData;

HTML页面如何呢？

1
2
3
4
<input type="file" id="file1" />
<div id="dragfile" style="width: 200px; height: 200px; border: 1px solid green;">
</div>
<input type="button" id="btnGet" onclick="get()" value="获取数据" />

其他的不是主要就不说了。为了大家方便，干脆把整个JS贴上来吧（其实我不喜欢这么做，大家别吐槽啊）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/*************************************
*
*   文件名：localPerview.js
*   创建日期：2014-07-14
*   文件作用：图像本地预览插件（基于JQUERY、HTML5）
*   说明：浏览器需要支持HTML5
*   作者：YunanWu（吴芸楠）
*
*   方法以及使用说明：
*           1、初始化 var lpi = new localPerviewImg("dragDivId", "fileId"); 参数：dragDivId,拖拽DIV；fileId，文件选择控件ID
*           2、getBase64ImageData(bool):获取预览的图片文件数据，参数如果为true，则截断标记子串返回可解析的Base64字符串，如果为false，则源数据返回，
*           3、showImg(src):设置预览的图片，参数可以为base64数据，或者是一个路径。
*           4、hideImg():隐藏预览的图片
*           5、readerLoad(e):本地文件读取Load事件。传入触发源event即可，一般无需手动调用
*           6、handleFiles(files):文件选取之后处理的事件，$()change(function () { this.handleFiles(this.files);});；一般无需手动调用
*           7、Base64ImageData：预览的图片文件数据（包含=标记的字符串数据）
*           8、imgPreviewId：预览的img标签ID
*          
**************************************/
 
 
function localPerviewImg(dragDivId, fileId) {
    var base = this;
    this.dragDivId = dragDivId;
 
    if (!this.VarIsNull(fileId)) {
        this.fileId = fileId;
        $("#" + fileId).change(function () {
            base.handleFiles(this.files);
        });
    }
    this.InitDragDiv();
}
localPerviewImg.prototype = {
    dragDivId: "",
    fileId: "",
    Base64ImageData: "",
    imgPreviewId: "",
    VarIsNull: function (varObject) {
        if (varObject == "undefined" || varObject == "" || varObject == undefined || varObject == " ") {
            return true;
        }
        else return false;
    },
    InitDragDiv: function () {
        var dragDiv = document.getElementById(this.dragDivId);
        this.imgPreviewId = this.dragDivId + "imgtmp";
        var divInner = "<span style=\"font: 25px helvetica,arial,sans-serif; line-height: 35px;color: #999; font-weight: normal;\">您可以拖拽图片到此上传。</span>";
        divInner += " <img src=\"\" id=\"" + this.imgPreviewId + "\" style=\"display: none; width: 200px; height: 200px; border: 1px solid white;\" />";
        $(dragDiv).html(divInner);
        dragDiv.addEventListener("dragover", function (ev) {
            ev.stopPropagation();
            ev.preventDefault();
        }, false);
        dragDiv.addEventListener("dragend", function (ev) {
            ev.stopPropagation();
            ev.preventDefault();
        }, false);
        var base = this;
        dragDiv.addEventListener("drop", function (ev) {
            ev.stopPropagation();
            ev.preventDefault();
            var file = ev.dataTransfer.files[0];
            var reader = new FileReader();
 
            if (file.type.substr(0, 5) == "image") {
                reader.onload = function (event) {
                    base.readerLoad(event);
                };
                reader.readAsDataURL(file);
            }
            else {
                alert("暂不支持此类文件.");
                $("#" + this.imgPreviewId).attr("src", "");
                this.Base64ImageData = "";
            }
        }, false);
        //设置页面属性，不执行默认处理（拒绝被拖放）
        document.ondragover = function (e) { e.preventDefault(); };
        document.ondrop = function (e) { e.preventDefault(); }
    },
    readerLoad: function (e) {
        var imgData = e.target.result;
        var baseWidth = $("#" + this.dragDivId).css("width");
        var baseHeight = $("#" + this.dragDivId).css("height");
        $("#" + this.imgPreviewId).attr("src", imgData).css("width", baseWidth).css("height", baseHeight).show();
        //设置全局图像数据
        this.Base64ImageData = imgData;
        $("#" + this.dragDivId).children("span").hide();
    },
    handleFiles: function (files) {
        var base = this;
        if (files.length <= 0) {
            alert("请选择文件.");
        }
        else {
            var file = files[0];
            //$.messager.alert("提示", file.type, "info");
            var imageType = /image.*/;
            //通过type属性进行图片格式过滤
            if (!file.type.match(imageType)) {
                $.messager.alert("提示", "图片格式不正确,请选择图片文件.", "warring");
            }
            else {
                var reader = new FileReader();
                reader.onload = function (e) {
                    //e.target.result返回的图片的dataURI格式的内容(BASE64数据)
                    base.readerLoad(e);
                }
                //读取数据文件。
                reader.readAsDataURL(file);
            }
        }
    },
    getBase64ImageData: function (isRemoveFlag) {
        var tmpData;
        if (isRemoveFlag) {
            //截取前面的标记子串。
            var index = this.Base64ImageData.indexOf(",");
            tmpData = this.Base64ImageData.substr(parseInt(index) + 1);
        }
        else {
            tmpData = this.Base64ImageData;
        }
        return tmpData;
    },
    showImg: function (data) {
        var imgData = data;
        var baseWidth = $("#" + this.dragDivId).css("width");
        var baseHeight = $("#" + this.dragDivId).css("height");
        $("#" + this.imgPreviewId).attr("src", imgData).css("width", baseWidth).css("height", baseHeight).show();
        //设置全局图像数据
        this.Base64ImageData = imgData;
        $("#" + this.dragDivId).children("span").hide();
    },
    hideImg: function () {
        $("#" + this.imgPreviewId).attr("src", "").hide();
        $("#" + this.dragDivId).children("span").show();
    }
}

下载demo

本文从百度空间搬家到博客园。。

图像本地预览插件（基于JQUERY、HTML5）的更多相关文章

  1. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  2. jquery 图片本地预览

    uploadPreview.js /* *名称:图片上传本地预览插件 v1.1 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *参数说明: I ...

  3. jQuery图片上传前先在本地预览（不经过后端处理）

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

  4. jQuery图片上传前先在本地预览

    js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...

  5. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  6. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  7. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  8. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  9. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

随机推荐

  1. 单片机 C 语言模块化编程

    好的开始是成功的一半 通过上一章的学习,我想你已经掌握了如何在程序中释放CPU了.希望能够继续坚持下去.一个良好的开始是成功的一半.我们今天所做的一切都是为了在单片机编程上做的更好. 在谈论今天的主题 ...

  2. Automatic Code Generation-->Implement Interface

    https://msdn.microsoft.com/en-us/library/hk90416s(v=vs.110).aspx VS中自带的只能提示,一个类继承自某一个接口. 由VS为类生成接口所要 ...

  3. C 语言字符串(译)

    C 语言的 switch 语句非常强大.然而,它不能用字符串作为判断条件,只能用常整数.这是可以理解的,因为 C 的字符串仅仅是数组,它们并不是并不是一个整体. 在某些情况下,将 string 作为 ...

  4. Rocky(dfs)

    题目描述 Sylvester Stallion is an old horse who likes nothing better than to wander around in the fields ...

  5. efront二次开发记要

    efront系统是一套开源的在线学习系统,是用PHP编写的,内含“考试”功能.该系统的开源的是社区版,虽然看上去功能强大,但使用起来却很不符合国情.为了让公司使用,先做了一次最简化的二次开发,由于是最 ...

  6. -_-#【Better Code】

    i++ 与 ++i 的性能区别 if (true) { console.log('hi') } if (!false) { console.log('hi~') } true && c ...

  7. [C# 网络编程系列]专题十：实现简单的邮件收发器

    转自:http://www.cnblogs.com/zhili/archive/2012/09/24/2689892.html 引言: 在我们的平常工作中,邮件的发送和接收应该是我们经常要使用到的功能 ...

  8. cocos2d-x 遇到的错误与解决方法。make: *** No rule to make target `/cygdrive/d/android/cocos2d-x-master/T12/proj.android/../../cocos2dx/xxxxx.cpp'

    cocos2d-x 遇到的错误与解决方法.make: *** No rule to make target `/cygdrive/d/android/cocos2d-x-master/T12/proj ...

  9. 滚动轮播插件——jCarouselLite

    jcarousellite(上下.水平滚动元素插件)插件使用: 参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" ...

  10. linux下出现+ ls --color=auto -l --color=auto...++ echo -ne '\033]0;root@imon-2:~'等

    [root@imon-2 ~]# cd /root/ + cd /root/ ++ echo -ne '\033]0;root@imon-2:~' [root@imon-2 ~]# ll + ls - ...