在ajax中調用上傳功能后，圖片未上傳

Question

我正在處理一張圖片上傳表單，該表單將通過nudejs腳本驗證上傳的圖片是否包含裸露。
如果圖片不包含裸露，則會上傳圖片。
上傳和檢查裸露功能運行良好，但是問題是我沒有找到鏈接這兩種方法的方法，因為檢查裸露功能“ onImageClick（）”的返回為'undefined'所以我無法檢查如果為true或false，則通過$.ajax調用上載函數。

這是代碼：

$(document).ready(function (e) {
    $("#uploadimage").on('submit',(function(e) {
        e.preventDefault();
        //return onImageClick('previewing'); //previewing is the id of the image in my html file
        //if(onImageClick('previewing')) return;
        var rn = onImageClick('previewing');
        console.log("rn: "+rn); //always get undefined 
        $("#message").empty();
        $('#loading').show();

        $.ajax({
          url: "ajax_php_file.php",
          type: "POST",            
          data: new FormData(this),
          contentType: false,      
          cache: false,            
          processData:false,       
          success: function(data) {
             $('#loading').hide();
             $("#message").html(data);
          }
      });
}));

// Function to preview image after validation
$(function() {
    $("#file").change(function() {
        $("#message").empty(); // To remove the previous error message
        var file = this.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))) {
           $('#previewing').attr('src','no-preview.png');
           $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
           return false;
        }
        else
        {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
         }
     });
});

function imageIsLoaded(e) {
    $("#file").css("color","green");
    $('#image_preview').css("display", "block");
    $('#previewing').attr('src', e.target.result);
    $('#previewing').attr('width', '250px');
    $('#previewing').attr('height', '230px');
};
//check nudity function
function onImageClick(node) {
    nude.load(node);
    // Scan it
    nude.scan(function(result){ 
        console.log(result ? "Nudity found in " + node + "!" : "Not nude");
                console.log("returned value is:",result);
                return result;
    });
}
});

編輯：我根據@Amir答案編輯代碼，他提到了我以前沒有注意到的重要點。
現在，我可以在沒有裸體的情況下觸發上傳函數，但是即使ajax調用中的成功函數被觸發，圖像也無法上傳：

    success: function(data)   
    {
    $('#loading').hide();
    $("#message").html(data);
    }

這是新代碼：

$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
//call check nudity function
onImageClick('previewing');
//check nudity function
function onImageClick(node) {
    nude.load(node);
    // Scan it
    nude.scan(function(result){ 
        console.log(result ? "Nudity found in " + node + "!" : "Not nude");
                console.log("returned value is:",result);
                if(result){
                    alert("conatain nudity!!");
                }
      else{
            $("#message").empty();
            $('#loading').show();
                $.ajax({
            url: "ajax_php_file.php", 
            type: "POST",             
            data: new FormData(this), 
            contentType: false,       
            cache: false,             
            processData:false,        
            success: function(data)   
            {
            $('#loading').hide();
            $("#message").html(data);
            }
                });
              }
    });
};

}));

// Function to preview image after validation
$(function() {
$("#file").change(function() {
$("#message").empty(); // To remove the previous error message
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewing').attr('src','no-preview.png');
$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
return false;
}
else
{
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$("#file").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '250px');
$('#previewing').attr('height', '230px');
};

});

Answer 1

nude.scan是異步的，因此您應該傳遞回調。 就像是：

nude.scan(function (result) { /* your logic according to the result */ })

Answer 2

我找到了解決方案，問題出在FormData上，並且返回了： TypeError：FormData.constructor的參數1沒有實現HTMLFormElement接口。 由於某種原因，它沒有出現在chrome控制台中，但是出現在Firefox中。 所以我在else語句中添加了這行代碼（以防發現裸體）：

var form = $('form').get(0); 

此代碼返回一個jQuery對象（ $('form') ），並將HTML元素傳遞給FormData（ get(0) ）。 然后在ajax請求中： data: new FormData(form),
希望此解決方案可以幫助其他人。