Skip to content

Commit fe4695f

Browse files
devin87devin87
committed
1. 修复IE9-某些特殊情况下点击文件选择按钮无反应的问题
2. 图片预览（preview）和缩放（scale）事件 3. 其它细节调整 Signed-off-by: Devin <devin87@qq.com>
1 parent 1c20482 commit fe4695f

File tree

11 files changed

+158
-111
lines changed

11 files changed

+158
-111
lines changed

‎Q.Uploader.all.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,7 @@
373373
* Q.Uploader.js 文件上传管理器 1.0
374374
* https://github.com/devin87/web-uploader
375375
* author:devin87@qq.com
376-
* update:2015/10/26 13:48
376+
* update:2016/04/22 14:58
377377
*/
378378
(function (window, undefined) {
379379
"use strict";
@@ -695,15 +695,9 @@
695695
resetInput: function () {
696696
var self = this,
697697

698-
boxInput = self.boxInput,
699-
target = self.target,
700-
701-
inputWidth = target.offsetWidth,
702-
inputHeight = target.offsetHeight;
698+
boxInput = self.boxInput;
703699

704-
boxInput.innerHTML = '<input type="file" name="' + self.upName + '" style="' + (self.clickTrigger ? 'visibility: hidden;' : 'width:' + inputWidth + 'px;height:' + inputHeight + 'px;font-size:100px;') + '"' + (self.multiple ? ' multiple="multiple"' : '') + '>';
705-
boxInput.style.width = inputWidth + "px";
706-
boxInput.style.height = inputHeight + "px";
700+
boxInput.innerHTML = '<input type="file" name="' + self.upName + '" style="' + (self.clickTrigger ? 'visibility: hidden;' : 'font-size:100px;') + '"' + (self.multiple ? ' multiple="multiple"' : '') + '>';
707701

708702
var inputFile = getFirst(boxInput);
709703

@@ -717,26 +711,34 @@
717711

718712
self.inputFile = inputFile;
719713

720-
self.updatePos();
721-
722-
return self;
714+
return self.updatePos();
723715
},
724716
//更新上传按钮坐标(for ie)
725717
updatePos: function (has_more_uploader) {
726-
if (this.clickTrigger) return;
718+
var self = this;
719+
if (self.clickTrigger) return self;
727720

728-
var getPos = this.getPos || getOffset;
721+
var getPos = self.getPos || getOffset,
729722

730-
var boxInput = this.boxInput,
731-
target = this.target,
723+
boxInput = self.boxInput,
724+
inputFile = getFirst(boxInput),
725+
target = self.target,
726+
727+
inputWidth = target.offsetWidth,
728+
inputHeight = target.offsetHeight,
732729

733-
pos = target.offsetWidth == 0 ? { left: -10000, top: -10000 } : getPos(target);
730+
pos = inputWidth == 0 ? { left: -10000, top: -10000 } : getPos(target);
731+
732+
boxInput.style.width = inputFile.style.width = inputWidth + "px";
733+
boxInput.style.height = inputFile.style.height = inputHeight + "px";
734734

735735
boxInput.style.left = pos.left + "px";
736736
boxInput.style.top = pos.top + "px";
737737

738738
//多用于选项卡切换中上传按钮位置重复的情况
739739
if (has_more_uploader) boxInput.style.zIndex = ++UPLOAD_HTML4_ZINDEX;
740+
741+
return self;
740742
},
741743
//触发ops上定义的回调方法,优先触发异步回调(以Async结尾)
742744
fire: function (action, arg, callback) {

‎Q.Uploader.image.all.js‎

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,7 @@
373373
* Q.Uploader.js 文件上传管理器 1.0
374374
* https://github.com/devin87/web-uploader
375375
* author:devin87@qq.com
376-
* update:2015/10/26 13:48
376+
* update:2016/04/22 14:58
377377
*/
378378
(function (window, undefined) {
379379
"use strict";
@@ -695,15 +695,9 @@
695695
resetInput: function () {
696696
var self = this,
697697

698-
boxInput = self.boxInput,
699-
target = self.target,
700-
701-
inputWidth = target.offsetWidth,
702-
inputHeight = target.offsetHeight;
698+
boxInput = self.boxInput;
703699

704-
boxInput.innerHTML = '<input type="file" name="' + self.upName + '" style="' + (self.clickTrigger ? 'visibility: hidden;' : 'width:' + inputWidth + 'px;height:' + inputHeight + 'px;font-size:100px;') + '"' + (self.multiple ? ' multiple="multiple"' : '') + '>';
705-
boxInput.style.width = inputWidth + "px";
706-
boxInput.style.height = inputHeight + "px";
700+
boxInput.innerHTML = '<input type="file" name="' + self.upName + '" style="' + (self.clickTrigger ? 'visibility: hidden;' : 'font-size:100px;') + '"' + (self.multiple ? ' multiple="multiple"' : '') + '>';
707701

708702
var inputFile = getFirst(boxInput);
709703

@@ -717,26 +711,34 @@
717711

718712
self.inputFile = inputFile;
719713

720-
self.updatePos();
721-
722-
return self;
714+
return self.updatePos();
723715
},
724716
//更新上传按钮坐标(for ie)
725717
updatePos: function (has_more_uploader) {
726-
if (this.clickTrigger) return;
718+
var self = this;
719+
if (self.clickTrigger) return self;
720+
721+
var getPos = self.getPos || getOffset,
727722

728-
var getPos = this.getPos || getOffset;
723+
boxInput = self.boxInput,
724+
inputFile = getFirst(boxInput),
725+
target = self.target,
726+
727+
inputWidth = target.offsetWidth,
728+
inputHeight = target.offsetHeight,
729729

730-
var boxInput = this.boxInput,
731-
target = this.target,
730+
pos = inputWidth == 0 ? { left: -10000, top: -10000 } : getPos(target);
732731

733-
pos = target.offsetWidth == 0 ? { left: -10000, top: -10000 } : getPos(target);
732+
boxInput.style.width = inputFile.style.width = inputWidth + "px";
733+
boxInput.style.height = inputFile.style.height = inputHeight + "px";
734734

735735
boxInput.style.left = pos.left + "px";
736736
boxInput.style.top = pos.top + "px";
737737

738738
//多用于选项卡切换中上传按钮位置重复的情况
739739
if (has_more_uploader) boxInput.style.zIndex = ++UPLOAD_HTML4_ZINDEX;
740+
741+
return self;
740742
},
741743
//触发ops上定义的回调方法,优先触发异步回调(以Async结尾)
742744
fire: function (action, arg, callback) {
@@ -1112,7 +1114,7 @@
11121114
/*
11131115
* Q.Uploader.Image.js 图片上传管理器界面
11141116
* author:devin87@qq.com
1115-
* update:2015/10/27 09:26
1117+
* update:2016/04/22 15:37
11161118
*/
11171119
(function (window, undefined) {
11181120
"use strict";
@@ -1193,6 +1195,7 @@
11931195
var Blob = window.Blob || window.WebkitBlob || window.MozBlob,
11941196
BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
11951197

1198+
//是否支持图片缩放
11961199
var support_image_scale = (function () {
11971200
if (!window.FileReader || !window.atob || !(Blob || BlobBuilder)) return false;
11981201

@@ -1276,6 +1279,10 @@
12761279
//是否支持图片缩放
12771280
Uploader.support.imageScale = support_image_scale;
12781281

1282+
Uploader.previewImage = previewImage;
1283+
Uploader.scaleImage = scaleImage;
1284+
1285+
12791286
//实现默认的UI接口
12801287
Uploader.extend({
12811288
//初始化
@@ -1302,6 +1309,36 @@
13021309
return types == "*" || types.indexOf(type) != -1;
13031310
},
13041311

1312+
//预览并压缩图片
1313+
previewImage: function (boxImage, task, ops) {
1314+
var self = this,
1315+
scale_data = task.scale || ops.scale,
1316+
support_scale = scale_data && self.supportScale(task.ext);
1317+
1318+
if (support_scale) task.skip = true;
1319+
1320+
previewImage(boxImage, task, function (src) {
1321+
self.fire("preview", { task: task, src: src });
1322+
1323+
if (!src || !support_scale) return;
1324+
1325+
scaleImage(src, get_image_mimetype(task.ext), scale_data, function (base64, mimetype) {
1326+
if (!base64) return;
1327+
1328+
var blob = dataURLtoBlob(base64, mimetype);
1329+
task.blob = blob;
1330+
task.skip = false;
1331+
self.list.push(task);
1332+
1333+
self.fire("scale", { task: task, base64: base64, type: mimetype, blob: blob });
1334+
1335+
if (self.auto) self.start();
1336+
});
1337+
});
1338+
1339+
return self;
1340+
},
1341+
13051342
//绘制任务UI
13061343
draw: function (task) {
13071344
var self = this,
@@ -1330,27 +1367,6 @@
13301367
boxProgress = getFirst(boxProgressbar),
13311368
boxDetail = getNext(boxProgressbar);
13321369

1333-
var scale_data = task.scale || ops.scale,
1334-
support_scale = scale_data && self.supportScale(task.ext);
1335-
1336-
if (support_scale) task.skip = true;
1337-
1338-
previewImage(boxImage, task, function (src) {
1339-
self.fire("preview", src);
1340-
1341-
if (!src || !support_scale) return;
1342-
1343-
scaleImage(src, get_image_mimetype(task.ext), scale_data, function (base64, mimetype) {
1344-
if (!base64) return;
1345-
1346-
var blob = dataURLtoBlob(base64, mimetype);
1347-
task.blob = blob;
1348-
task.skip = false;
1349-
self.list.push(task);
1350-
if (self.auto) self.start();
1351-
});
1352-
});
1353-
13541370
setOpacity(boxProgressbar, 0.3);
13551371
setOpacity(boxProgress, 0.5);
13561372

@@ -1361,8 +1377,8 @@
13611377
//添加到视图中
13621378
boxView.appendChild(box);
13631379

1364-
//---------------- 更新UI ----------------
1365-
self.update(task);
1380+
//---------------- 预览图片并更新UI ----------------
1381+
self.previewImage(boxImage, task, ops).update(task);
13661382
},
13671383

13681384
//更新任务界面

‎demo/custom-image.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<div>
1616
<a id="upload-target" class="x-button">添加图片并上传</a>
1717
</div>
18-
<div id="upload-info"></div>
18+
<div id="upload-view"></div>
19+
<div id="log"></div>
1920
</div>
2021
</div>
2122

@@ -26,9 +27,13 @@
2627
<script type="text/javascript" src="../js/Q.Uploader.Image.js"></script>
2728

2829
<script type="text/javascript">
30+
function log(msg) {
31+
document.getElementById("log").innerHTML += (msg != undefined ? msg : "") + "<br />";
32+
}
33+
2934
var Uploader = Q.Uploader,
3035
formatSize = Q.formatSize,
31-
boxView = document.getElementById("upload-info");
36+
boxView = document.getElementById("upload-view");
3237

3338
var uploader = new Uploader({
3439
url: UPLOAD_URL,
@@ -50,6 +55,14 @@
5055
//添加之前触发
5156
add: function (task) {
5257
if (task.disabled) return alert("允许上传的文件格式为：" + this.ops.allows);
58+
},
59+
//图片预览后触发
60+
preview: function (data) {
61+
log(data.task.name + " : " + data.src);
62+
},
63+
//图片压缩后触发
64+
scale: function (data) {
65+
log(data.task.name + " : 已压缩！");
5366
}
5467
}
5568
});

‎demo/demo.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
var list_page = [
1818
{ title: "默认上传", href: "default.html" },
1919
{ title: "简单上传", href: "simple.html" },
20-
{ title: "仅上传图片", href: "simple-image.html" },
20+
{ title: "指定上传类型", href: "simple-filetype.html" },
2121
{ title: "图片预览+缩放+上传", href: "custom-image.html" },
2222
{ title: "html4+滚动区域", href: "scroll-view.html" },
2323
{ title: "文件单选", href: "simple-single.html" },

demo/simple-image.html renamed to demo/simple-filetype.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>文件上传 - 仅允许上传图片</title>
5+
<title>文件上传 - 指定上传类型</title>
66
<link href="demo.css" rel="stylesheet" type="text/css" />
77
<link href="../css/uploader.css" rel="stylesheet" type="text/css" />
88
</head>

0 commit comments

Comments
 (0)