1. The project requires that the picture be uploaded, click on the picture preview, and then use the WebUploader image to add the thumbnail to show
later, I use Lightbox control to achieve the picture preview function, but the preview picture is very small
personal guess is that the thumbnail is too small
2.
the screenshot of the original picture is like this
3.WebUploader Code
/ / instantiate
uploader = WebUploader.create({
pick: {
id: "-sharpfilePicker",
label: ""
},
formData: {
uid: 123
},
dnd: "-sharpdndArea",
paste: "-sharpuploader",
compress: false,//
swf: "../../bower_components/webuploader/Uploader.swf",
chunked: false,
chunkSize: 512 * 1024,
server: "@Url.Action("UploadFile")",
// runtimeOrder: "flash",
// accept: {
// title: "Images",
// extensions: "gif,jpg,jpeg,bmp,png",
// mimeTypes: "image/*"
// },
thumb:{
allowMagnify: true,
},
//
disableGlobalDnd: true,
fileNumLimit: 300,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
});
// js, txt
uploader.on("dndAccept", function (items) {
var denied = false,
len = items.length,
i = 0,
// js
//unAllowed = "text/plain;application/javascript ";
unAllowed = "";
for (; i < len; iPP) {
//
if (~unAllowed.indexOf(items[i].type)) {
denied = true;
break;
}
}
return !denied;
});
Code for adding thumbnails
function addFile(file) {
var $li = $("<li id="" + file.id + "">" +
"<p class="title">" + file.name + "" +
"<p class="imgWrap">" +
"<p class="progress"><span></span>" +
"</li>"),
$btns = $("<div class="file-panel">" +
"<span class="cancel"></span>" +
"<span class="rotateRight"></span>" +
"<span class="rotateLeft"></span></div>").appendTo($li),
$prgress = $li.find("p.progress span"),
$wrap = $li.find("p.imgWrap"),
$info = $("<p class="error">"),
showError = function (code) {
switch (code) {
case "exceed_size":
text = "";
break;
case "interrupt":
text = "";
break;
default:
text = "";
break;
}
$info.text(text).appendTo($li);
};
if (file.getStatus() === "invalid") {
showError(file.statusText);
} else {
//todo lazyload
$wrap.text("");
uploader.makeThumb(file, function (error, src) {
var img;
if (error) {
$wrap.text("");
return;
}
if (isSupportBase64) {
//img = $("<img src="" + src + "">");
img = $("<a href=""+src+ "" data-lightbox="image" >" + "<img src="" + src + "">" + "</a>");
$wrap.empty().append(img);
} else {
$.ajax("../../server/preview.php", {
method: "POST",
data: src,
dataType: "json"
}).done(function (response) {
if (response.result) {
img = $("<img src="" + response.result + "">");
$wrap.empty().append(img);
} else {
$wrap.text("");
}
});
}
}, thumbnailWidth, thumbnailHeight);
percentages[file.id] = [file.size, 0];
file.rotation = 0;
}
is there a god who can solve my problem? thank you!