最近是被這項目搞瘋了。害我每天寫插件,上週才寫,如今就繼續吧.....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(吳芸楠)
*
* 方法以及使用說明:
* 一、初始化 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();
}
}
|
本文從百度空間搬家到博客園。。