Я пытаюсь загрузить файл через jquery ajax в asp.net mvc4, но пишет черное изображение как файл - PullRequest
0 голосов
/ 24 октября 2019

Я пытаюсь загрузить несколько файловых данных, используя плагин krajee для загрузки файлов через jquery ajax, чтобы получить несколько файлов для отправки данных на контроллер asp.net mvc4, но он продолжает получать черное изображение. я что-то упустил?

HTML

<canvas id="CanvasGalleryPic" width="800" height="600" hidden></canvas>
    <div class="row">
     <div class="col-md-12 col-sm-12">
       <div class="form-group">
        <input id="files-gallery" name="files-gallery[]" type="file" class="form-control" accept=".jpg, .jpeg, .png, .bmp" multiple />
       </div>
     </div>
    </div>

Jquery

$("#files-gallery").fileinput({
            browseOnZoneClick: true,
            showUpload: false,
            dropZoneEnabled: true,
            maxFileCount: 10,
            allowedFileExtensions: ["jpg", "png", "gif"],
            overwriteInitial: false,
            showRemove: true,
            removeClass: "btn btn-danger btn-block",
            browseClass: "btn btn-primary btn-block",
            showCaption: false,
            previewFileType: "image",
            maxFilePreviewSize: 10240,
            initialPreviewAsData: true,
            //minImageWidth: 800,
            //minImageHeight: 600,
            //maxImageWidth: 1024,
            //maxImageHeight: 768,
            resizeImage: true,
            resizeIfSizeMoreThan: 1000,
            autoOrientImage: true
        });

Javascript

/*
         * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
         * images to fit into a certain area.
         * /
         * @@param {Number} srcWidth Source area width
         * @@param {Number} srcHeight Source area height
         * @@param {Number} maxWidth Fittable area maximum available width
         * @@param {Number} maxHeight Fittable area maximum available height
         * @@return {Object} { width, heigth }
         */
function calculateAspectRatio(srcWidth, srcHeight, maxWidth, maxHeight) {
    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
    //var ratio = Math.min(600 / srcWidth, 800 / srcHeight);
    return {
        width: (srcWidth * ratio).toFixed(0),
        height: (srcHeight * ratio).toFixed(0)
    };
}


function GetCanvasImage(_CanvasId, _File, _Width, _Height) {
    var base64Data = null;
    var reader = new FileReader();
    var canvas = document.getElementById('' + _CanvasId + '');
    var byteData = null;

    reader.onload = function (e) {
        base64Data = reader.result;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        var x = 0;
        var y = 0;
        var imageObject = new Image();
        imageObject.src = base64Data;
        var image = calculateAspectRatio(imageObject.naturalWidth, imageObject.naturalHeight, _Width, _Height);
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(imageObject, x, y, image.width, image.height);
    };

    reader.onloadend = function (e) {
        byteData = canvas.toDataURL("image/jpeg", 1.0);
    };

    var promise = new Promise(function (resolve, reject) {
        if (_File) {
            reader.readAsDataURL(_File);
        }
    });

    promise.then(function (result) {
        byteData = byteData.split(',')[1];
    }).catch(function (error) {
        notify.error(error);
    });

    return byteData;
}

function SaveGallery(_RestaurantId, _GalleryByteData) {
    var _Isuploaded = false;
    var promise = new Promise(function (resolve, reject) {
        $.ajax({
            url: '/General/GalleryUpload',
            data: JSON.stringify({ "RId": _RId, "ImageFile": _GalleryByteData }),
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json;',
            success: function (result) {
                if (result.status === 1) {
                    resolve(result);
                }
                else {
                    reject(result);
                }
            }
        });
    });

    promise.then(function (result) {
        _Isuploaded = true;
    }).catch(function (error) {
        notify.error(error.message);
    });

    return _Isuploaded;
}

var _galleryfiles = [];
        var GalleryImageFiles = Object.values($('#files-gallery').fileinput('getFileStack'));
        if (GalleryImageFiles) {
            $(GalleryImageFiles).each(function () {
                _galleryfiles.push({ "filename": this.name, "filedata": GetCanvasImage("CanvasGalleryPic", this.file, 800, 600) });
            });
        }

Событие нажатия кнопки ON в Javascript

if (_galleryfiles) {
                $(_galleryfiles).each(function () {
                    //console.log("filedata", this.filedata);
                    var IsUpload = SaveGallery(RId, this.filedata);
                    _gallery.push({ "filename": this.filename, "uploaded": IsUpload });
                });
            }

Я перепробовал много примеров сценариев, но я не мог понять, чего мне не хватает в этом сценарии, может кто-нибудь указать мне правильное направление

...