首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 如何在 AJAX 帖子中使用浏览器图像压缩脚本

我想要的图像上传到我的服务器与AJAX.但我必须在上传之前压缩它，因为图像大小将是巨大的.我发现了一个叫做浏览器图像压缩的脚本.我已经在AJAX中try 这个脚本大约5个小时了，但我不能.AJAX仍在发送原始大小的脚本.我对Javascript还是个新手.

脚本https://github.com/Donaldcwl/browser-image-compression脚本https://github.com/Donaldcwl/browser-image-compression

JSfiddle https://jsfiddle.net/rd8f6vqu/2/

我打开了带有甜蜜alert 器2的图像加载屏幕.

myfunction个

function addImage (image_type, game) {
    var confirmText = 'Submit';
    var cancelText = 'Cancel';
    var main_title = 'Title';
    var img_icon = '<span class="material-symbols-outlined gp-imageupload-titleicon">swords</span>';
    Swal.fire({
      customClass: {
        container: 'gp-imageupload-body',
        popup: 'swall-custom-backgroundcolor swall-custom-border',
        title: 'swall-custom-title',
        htmlContainer: 'swall-custom-textcolor',
        icon: 'swall-custom-icon',
        validationMessage: 'swall-custom-validatormsg',
      },
      title: main_title,
      iconHtml: img_icon,
      html:
      '<div class="gp-imageupload-box">' +
          '<form action="#" id="gp-imageupload-sendForm">' +
              '<div id="gp-imageupload-drop-area">' +
                  '<label for="gp-imageupload-fileElem">' +
                      '<input type="file" name="uploaded_image" id="gp-imageupload-fileElem" onchange="handleFiles(this.files)" />' +
                      '<div class="uploadIcon">' +
                          '<i class="fa fa-cloud-upload fa-4x" aria-hidden="true"></i>' +
                          '<p>Paste Image <span class="or">or</span> Drag & Drop <span class="or">or</span> Click & Select</p>' +
                          '<p class="last">Only jpeg, jpg and png</p>' +
                      '</div>' +
                      '<div id="gp-imageupload-gallery"></div>' +
                  '</label>' +
                  '<div class="gp-imageupload-control-panel">' +
                      '<div class="item">' +
                          '<div id="delete-image"><span class="material-symbols-outlined">delete_forever</span></div>' +
                      '</div>' +
                  '</div>' +
              '</div>' +
              '<div class="progress-wrapper">' +
                '<div class="progress-info">' +
                  '<div class="progress-percentage">' +
                    '<span class="text-sm font-weight-bold" id="gp-imageupload-progressbar-span">0%</span>' +
                  '</div>' +
                '</div>' +
                '<div class="progress">' +
                  '<div class="progress-bar bg-primary" id="gp-imageupload-progressbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                '</div>' +
              '</div>' +
              '<div id="gp-imageupload-details_img">' +
                  '<div class="list">' +
                      '<div class="item">' +
                          '<div class="attr">Name</div>' +
                          '<div class="data" id="nameImage">No Data</div>' +
                      '</div>' +
                      '<div class="item">' +
                          '<div class="attr">Size</div>' +
                          '<div class="data" id="sizeImage">No Data</div>' +
                      '</div>' +
                      '<div class="item">' +
                          '<div class="attr">Type</div>' +
                          '<div class="data" id="typeImage">No Data</div>' +
                      '</div>' +
                  '</div>' +
              '</div>' +
          '</form>' +
      '</div>' +
      '<div id="gp-imageupload-container-image"></div>',
      showCloseButton: false,
      showCancelButton: true, 
      focusConfirm: false,
      confirmButtonText: confirmText,
      cancelButtonText: cancelText,
      showLoaderOnConfirm: true,
      preConfirm: function() {
        var ext = $('#gp-imageupload-fileElem').val().split('.').pop().toLowerCase();
        console.log(ext);
        if($.inArray(ext, ["jpg","jpeg","png"]) == -1) {
          Swal.showValidationMessage(
            `Error`
          )
        }
        
      },
      }).then((result) => {
        if(result.value){
          var file_input = $('#gp-imageupload-fileElem');
          var progress_bar = $('#gp-imageupload-progressbar');
          var progress_percent = $('#gp-imageupload-progressbar-span');
          var original_file = $('#gp-imageupload-fileElem')[0].files[0];
          const options = {
            maxWidthOrHeight: 1000,
            useWebWorker: true
          }

          imageCompression(original_file, options)
          .then(function (compressedFile) {+
              console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
              console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
              return uploadToServer(compressedFile); // write your own logic
          })
          .catch(function (error) {
              console.log(error.message); // output: I just want to stop
          });
          
          var filedata = new FormData();
          filedata.append('game', game);
          filedata.append('data', image_type);
          filedata.append('input_val', "image");
          filedata.append('file', compressedFile);

          $.ajax({
            url: 'editimage.php',
            type: 'POST',
            data: filedata,
            dataType: "json",
            cache:false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                var percentVal = '0%';
                var percentVal2 = '0';
                progress_bar.attr("aria-valuenow", percentVal2);
                progress_bar.css("width", percentVal);
                progress_percent.text(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                progress_bar.attr("aria-valuenow", percentComplete);
                progress_bar.css("width", percentVal);
                progress_percent.text(percentVal);
            },
            complete: function(xhr) {
              var percentVal = '100%';
              var percentVal2 = '100';
                progress_bar.attr("aria-valuenow", percentVal2);
                progress_bar.css("width", percentVal);
                progress_percent.text(percentVal);
            },
            success: function(result){
              if (result.status == true) {
                
              }
              else {
                
              }                 
            }
          });
        }else {
            window.removeEventListener('paste', pasteImage);
        }
    });
    window.nodata_text = 'No Data';
    $.getScript( "/assets/js/imageuploader.js?ver=111" )
      .done(function( script, textStatus ) {
        console.log( textStatus );
      })
      .fail(function( jqxhr, settings, exception ) {
        $( "div.log" ).text( "Triggered ajaxError handler." );
    });
  };

console.log个

xxxx Uncaught (in promise) ReferenceError: compressedFile is not defined
    at xxxx
compressedFile instanceof Blob true
xxxx compressedFile size 0.12560653686523438 MB

imageuploader.js个

// ************************ Drag and drop ***************** //
//# sourceURL=/assets/js/imageuploader.js?ver=111
var dropArea = document.getElementById("gp-imageupload-drop-area")
var fileElem = document.getElementById('gp-imageupload-fileElem');
var gallery = document.getElementById('gp-imageupload-gallery');

    // Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false)
    document.body.addEventListener(eventName, preventDefaults, false)
})
dropArea.addEventListener('DOMNodeInserted',function () {
    $('.uploadIcon').css('display','none');
    if($('#gp-imageupload-gallery').children().length > 1) {
        $('#gp-imageupload-gallery').children().first().remove();
    }
});

// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)

function preventDefaults (e) {
    e.preventDefault()
    e.stopPropagation()
}

function handleDrop(e) {
    e.preventDefault();
    var fileInput = document.getElementById("gp-imageupload-fileElem");
    fileInput.files = e.dataTransfer.files;
    var dt = e.dataTransfer;
    var files = dt.files;
    handleFiles(files);
}

function handleFiles(files) {
    files = [...files];
    files.forEach(previewFile);
}

function previewFile(file) {
    var reader = new FileReader();
    reader.onloadend = function() {
        dropArea.style.height = '100%';
        let img = document.createElement('img');
        img.src = reader.result
        gallery.appendChild(img);
        setDataForImage(file);
        
    }
    reader.readAsDataURL(file);
}



//********************paste********************//
//var input = document.querySelector("#gp-imageupload-text");
var pasteImage = function(event){
    const fileInput = document.getElementById("gp-imageupload-fileElem");
    fileInput.files = event.clipboardData.files;
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    for (index in items) {
        var item = items[index];
        if (item.kind === 'file') {
            var blob = item.getAsFile();
            var reader = new FileReader();
            
            reader.onload = function(event){
                let img = document.createElement('img')
                img.src = event.target.result
                document.getElementById('gp-imageupload-gallery').appendChild(img);
                setDataForImage(blob);
            };
            reader.readAsDataURL(blob);
            
        }
    }
}
window.addEventListener("paste", pasteImage);


function setDataForImage(file)
{
    var nameImage = $('#nameImage');
    var sizeImage = $('#sizeImage');
    var typeImage = $('#typeImage');
    //var timemodifiImage = $('#timemodifiImage');
    //var datemodifiImage = $('#datemodifiImage');
    var filesizetoMB = file.size / 1024 / 1024;
    console.log('file',file);
    nameImage.text(file.name);
    sizeImage.text(filesizetoMB.toFixed(2)+' MB');
    typeImage.text(file.type);
    //timemodifiImage.text(file.lastModified);
    //datemodifiImage.text(file.lastModifiedDate);
}

var deleteImageBtn = $('#delete-image');
deleteImageBtn.click(function(){
    var image = $('#gp-imageupload-gallery').children().first().remove();
    var nameImage = $('#nameImage');
    var sizeImage = $('#sizeImage');
    var typeImage = $('#typeImage');
    $('.uploadIcon').css('display','flex');
    fileElem.value = "";
    nameImage.text(nodata_text);
    sizeImage.text(nodata_text);
    typeImage.text(nodata_text);
});

推荐答案

好吧，我想通了.

xxxx Uncaught (in promise) ReferenceError: compressedFile is not defined

这种情况的发生是因为Promise()

Java脚本中的promise 表示已经开始的操作， 但这项工作将在以后完成.

当我查看Chrome断点时，以下代码

filedata.append('file', compressedFile);

在发送之前发送

imageCompression(original_file, options)
          .then(function (compressedFile) {+
              console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
              console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
              return uploadToServer(compressedFile); // write your own logic
          })
          .catch(function (error) {
              console.log(error.message); // output: I just want to stop
          });

这就是它返回UNDEFINED的原因.为了解决这个问题，我在一个函数中包含了$.ajax个代码.像这样，

function ajaxpost (dataForm) {
   $.ajax({
     // some ajax codes
   });
}

然后，我在Promise内部调用此函数，所有问题都解决了.

imageCompression(original_file, options)
        .then(function (compressedFile) {
          console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
          console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeM
          var file_Type = compressedFile.type.split('/').pop().toLowerCase();
          var filedata = new FormData();
          filedata.append('game', game);
          filedata.append('data', image_type);
          filedata.append('input_val', "image");
          filedata.append('file', compressedFile);
          filedata.append('file_type', file_Type);

          ajaxpost(filedata);
        })
        .catch(function (error) {
            console.log(error.message); // output: I just want to stop
        });

这里是最终代码；

imageCompression(original_file, options)
.then(function (compressedFile) {
    console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeM
    var file_Type = compressedFile.type.split('/').pop().toLowerCase(); // compressedFile.type = image/png. With this code I only get the last "png".
    var filedata = new FormData();
    filedata.append('game', game);
    filedata.append('data', image_type);
    filedata.append('input_val', "image");
    filedata.append('file', compressedFile);
    filedata.append('file_type', file_Type);

    ajaxpost(filedata);
})
.catch(function (error) {
    console.log(error.message); // output: I just want to stop
});
    
function ajaxpost (dataForm) {
    $.ajax({
    url: 'editgameprofile.php',
    type: 'POST',
    data: dataForm,
    dataType: "json",
    cache:false,
    contentType: false,
    processData: false,
    beforeSend: function() {
        var percentVal = '0%';
        var percentVal2 = '0';
        progress_bar.attr("aria-valuenow", percentVal2);
        progress_bar.css("width", percentVal);
        progress_percent.text(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        progress_bar.attr("aria-valuenow", percentComplete);
        progress_bar.css("width", percentVal);
        progress_percent.text(percentVal);
    },
    complete: function(xhr) {
        var percentVal = '100%';
        var percentVal2 = '100';
        progress_bar.attr("aria-valuenow", percentVal2);
        progress_bar.css("width", percentVal);
        progress_percent.text(percentVal);
    },
    success: function(result){
        if (result.status == true) {
        
        }
        else {
        
        }                   
    }
    });
}

Javascript相关问答推荐

回归函数不会迭代到foreach中的下一个元素

将未等待的未处理的错误promise 转变为警告@ changeTicksAndRejections(由当时的抛出错误创建)

JavaScript Date对象在UTC中设置为午夜时显示不正确的日期

调用SEARCH函数后，程序不会结束

主要内部的ExtJS多个子应用程序

react 路由加载程序行为

我不知道为什么setwritten包装promise 不能像我预期的那样工作

浮动Div的淡出模糊效果

康威的生活游戏规则在我的Javascript版本中不起作用.''我做错了什么？

显示图—如何在图例项上添加删除线效果？

使用Java脚本导入gltf场景并创建边界框

React.Development.js和未捕获的ReferenceError：未定义useState

如何在JAVASCRIPT中合并两组对象并返回一些键

使用插件构建包含chart.js提供程序的Angular 库？

警告框不显示包含HTML输入字段的总和

OnClick更改Json数组JSX中的图像源

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

背景动画让网站摇摇欲坠

如何在AG-Grid文本字段中创建占位符

select 2-删除js插入的项目将其保留为选项

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630