blueimp jQuery file upload not being triggered

问题

I'm trying to use the blueimp file upload plugin to asynchronously upload images but when I try to upload them nothing happens. None of the callback functions are being triggered at all. I'm using this function to bind the file uploader to the file inputs.

var initFileUpload = function (gender) {
//Used to bind fileupload plugin and send files

//bind file upload
$('#add_form').fileupload({
    namespace: gender+'_image',
    singleFileUploads: true,
    formData: [{name:'gender', value: gender}],
    fileInput: $("#"+gender+'_image'), 
    done: function(e, data){
        alert('success '+data.result);
    }

});
//Bind event callbacks
$('#add_form').bind('fileuploadsend', function (e, data) {
    console.log('sent');
});
$('#add_form').bind('fileuploaddone', function (e, data) {
    console.log('done');
});
$('#add_form').bind('fileuploadfail', function (e, data) {
    console.log(data.result);
});
$('#add_form').bind('fileuploadalways', function (e, data) {
    console.log(data.result);
});

}

Which was inspired by the multiple file upload tutorial here. I'm doing it this way because I have 3 different inputs with different names. I'm then firing the send function manually inside of my ajax call, or attempting to.

$.ajax({
      type: "POST",
      url: "/manage/processadditem",
      data: $("#add_form").serialize(),
      dataType: "html",
      success: function( response, textStatus, XHR )
      {
        if(response.indexOf('invalid') >= 0 || response.indexOf('Exception') >= 0){
            //Show them their errors
            alert(response);
        }
        else{
            //Upload item images
            //Send files
            $('#add_form').fileupload('send', {fileInput: $("#neutral_image"), url: '/manage/items/itemimage/test' });
            $('#add_form').fileupload('send', {fileInput: $("#male_image"), url: '/manage/items/itemimage/test' });
            $('#add_form').fileupload('send', {fileInput: $("#female_image"), url: '/manage/items/itemimage/test' });
            alert('should have uploaded image to cdn.completeset.com/items/test_nla.jpg if gender was neutral');
        }

      },
      error: function(jqXHR, textStatus, errorThrown){
        alert('An error occurred, please try again later.');
      }
    });

I found in the documentation here under the section Programmatic File Uploads that you can use the send method to manually send files with a line like $('#fileupload').fileupload('send', {files: filesList}); so that's what I'm trying to use to send the files. Unfortunately I'm not getting any sort of response from any of the callback functions at all, and I have no idea why.

回答1:

I just ended up going with the malsup form plugin here. http://malsup.com/jquery/form/#ajaxForm After struggling with blueImp for 2 days I got this one up and running in only a few minutes.

回答2:

Try this, You can download working example here;

jQuery Blueimp file uploader

来源：https://stackoverflow.com/questions/11889459/blueimp-jquery-file-upload-not-being-triggered

标签

jquery

jquery-plugins

file-upload

blueimp