图像本地预览插件（基于JQUERY、HTML5）

时间  2019-11-10
标签 图像 本地 预览 插件 基于 jquery html5 html 栏目 JQuery 繁體版
原文   原文链接

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

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

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

 

看看本身实现的插件效果吧。浏览器

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

说一下这个插件：浏览器须要支持HTML5，而且是基于Jquery的。异步

介绍下使用方法吧ide

1）初始化使用this

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

2）获取预览的数据url

 

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

若是参数为false的话也能够像以下调用：spa

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（吴芸楠）
*   主页：http://hi.baidu.com/yunanwu
*
*   方法以及使用说明：
*           一、初始化 var lpi = new localPerviewImg("dragDivId", "fileId"); 参数：dragDivId,拖拽DIV；fileId，文件选择控件ID
*           二、getBase64ImageData(bool):获取预览的图片文件数据，参数若是为true，则截断标记子串返回可解析的Base64字符串，若是为false，则源数据返回，
*           三、showImg(src):设置预览的图片，参数能够为base64数据，或者是一个路径。
*           四、hideImg():隐藏预览的图片
*           五、readerLoad(e):本地文件读取Load事件。传入触发源event便可，通常无需手动调用
*           六、handleFiles(files):文件选取以后处理的事件，$()change(function () { this.handleFiles(this.files);});；通常无需手动调用
*           七、Base64ImageData：预览的图片文件数据（包含=标记的字符串数据）
*           八、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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程