在ajax中调用上传函数后图像未上传答案

【问题标题】：image not uploaded after calling upload function in ajax在ajax中调用上传函数后图像未上传
【发布时间】：2015-10-06 02:59:32
【问题描述】：

我正在制作一个图片上传表单，该表单将在nudejs 脚本的帮助下验证上传的图片是否包含裸露内容。
如果图片不包含裸露内容，则会上传。
上传和检查裸露功能运行良好，但问题是自从检查裸露功能“onImageClick()”返回'undefined' 后，我没有找到链接这两种方法的方法，所以我无法检查如果它的真假，以便通过$.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');
};

});

【问题讨论】：

好笑，我以为你想说nodejs，但你是对的
是的，nude.js :) 如果您对如何解决这个问题有任何想法，我将不胜感激 :)
无论结果如何，请记住您正在浏览器上进行此验证。恶意用户总是有可能绕过浏览器端验证。如果您需要对此采取防弹措施，那么您还需要在上传图片后在服务器上进行验证。
@Spudley 感谢您提供此信息，我如何在服务器端也检查此信息？你的意思是中等功能还是自动脚本？
它可以是适度的或自动的，这取决于您的需要。我不知道有任何用于服务器端任务的自动化工具，但我确信它们一定存在。

标签： javascript jquery ajax nude.js

【解决方案1】：

nude.scan 是异步的，所以你应该传递一个回调。类似：

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

【讨论】：

谢谢，我根据你的回答尝试了这段代码，它现在正在检查图像是否包含裸露，但如果图像包含裸露，它没有上传图像：jsfiddle.net/f1659mj5 甚至函数因为$('#loading').hide(); 被警告，所以被调用。
我可以看到您正在使用 'this' - new FormData(this)，因此您可能应该绑定相关上下文：nude.scan(function (result){/*your code*/}。绑定（这个））
这也不会改变任何东西。这是控制台的屏幕截图：imgur.com/UrafftB
能否提供请求的屏幕截图（网络选项卡）？
感谢@Amir，我找到了问题所在并解决了。

【解决方案2】：

我找到了解决方案，问题出在 FormData 上，它正在返回： TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement. 这是由于某种原因没有出现在 chrome 控制台中，但它出现在 Firefox 中。所以我在 else 语句中添加了这行代码（以防找不到裸露）：

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

此代码返回一个 jQuery 对象 ($('form')) 并将一个 HTML 元素传递给 FormData (get(0))。然后在ajax请求中：data: new FormData(form),
希望此解决方案对其他人有所帮助。

【讨论】：