将图像缩小功能与其他变量组合ajax

时间:2016-11-28 06:37:20

标签: javascript jquery ajax

我下面有这个脚本,它由两部分组成,一组输入文本字段和一个图像上传,然后运行一个函数来减小图像文件的大小,两者都可以作为单独的ajax调用工作。我希望能够将两者合并为一个ajax调用,但我不确定如何继续,有人会有建议吗?感谢

$("#submit").click(function() {

        var we_publication_name = $("select#we_publication_name").val();
        var we_section_name = $("select#we_section_name").val();
        var we_caption1 = $("#we_caption1").val();
        var we_StoryName = $("#we_StoryName").val();
        var we_heading = $("#we_heading").val();
        var we_sub_heading = $("#we_sub_heading").val();
        var we_author_name = $("#we_author_name").val();
        var we_body = $("#we_body").val();

        if (window.File && window.FileReader && window.FileList && window.Blob) {
            var files = document.getElementById('insert_image').files;
            for(var i = 0; i < files.length; i++) {
                resizeAndUpload(files[i]);
            }

        } else {

            alert('The File APIs are not fully supported in this browser.');

        }

        function resizeAndUpload(file) {

            var reader = new FileReader();
            reader.onloadend = function() {

                var tempImg = new Image();
                tempImg.src = reader.result;
                tempImg.onload = function() {

                var MAX_WIDTH = 800;
                var MAX_HEIGHT = 600;
                var tempW = tempImg.width;
                var tempH = tempImg.height;
                if (tempW > tempH) {
                    if (tempW > MAX_WIDTH) {
                    tempH *= MAX_WIDTH / tempW;
                    tempW = MAX_WIDTH;
                }
                } else {
                if (tempH > MAX_HEIGHT) {
                    tempW *= MAX_HEIGHT / tempH;
                    tempH = MAX_HEIGHT;
                }
            }

            var canvas = document.createElement('canvas');
            canvas.width = tempW;
            canvas.height = tempH;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tempW, tempH);
            var dataURL = canvas.toDataURL("image/jpeg");

            var xhr = new XMLHttpRequest();

        document.getElementById('the_image').src=dataURL;

      }

    }

    reader.readAsDataURL(file);

    }

    $.ajax({
            type: "POST",
            url: "add_news.php",
            data: {image:dataURL,we_publication_name:we_publication_name,we_section_name:we_section_name,we_caption1:we_caption1,we_StoryName:we_StoryName,we_heading:we_heading,we_sub_heading:we_sub_heading,we_author_name:we_author_name,we_body:we_body},
    });

});

0 个答案:

没有答案