Is there a good way to preview or process thumbnails after adding pictures to WebUploader?

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
clipboard.png


clipboard.png

.

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!

Mar.07,2021

I used another method to implement
, because this thumbnail should not be processed, so I simply do not have thumbnails
and let the file upload automatically, then generate img
according to the file's address, and then use LightBox to pop up the image.

Menu