圖像本地預覽插件（基於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教程