blueimp jQuery文件上传没有被触发 [英] blueimp jQuery file upload not being triggered

问题描述

我试图使用blueimp文件上传插件来异步上传图片，但是当我尝试上传它们时，没有任何反应。根本没有任何回调函数被触发。

  var initFileUpload = function（gender）{$ b我使用这个函数来绑定文件上传器到文件输入。 $ b //用于绑定fileupload插件并发送文件
 
 //绑定文件上传
 $（'＃add_form'）。fileupload（{
 namespace：gender +'_ image' ，
 singleFileUploads：true，
 formData：[{name：'gender'，value：gender}]，
 fileInput：$（＃+ gender +'_ image'），
完成：function（e，data）{
 alert（'success'+ data.result）; 
} 
 
}）; 
 //绑定事件回调
 $（'＃add_form'）。bind（'fileuploadsend'，function（e，data）{
 console.log（'sent'）; 
}）; 
 $（'＃add_form'）。bind（'fileuploaddone'，function（e，data）{
 console.log（'done'）; 
}）; （'data_res'）; 
 $（'＃add_form'）。bind（'fileuploadfail'，function（e，data）{
 console.log（data.result）; 
}）; （b，b，b，b，b，b，b，b，b，b，b，b） 
 
 
  

其中灵感来源于多文件上传教程 here。这样做是因为我有3个不同名称的输入。然后我在我的ajax调用中手动发送send函数，或者尝试执行。

  $。ajax（{
 type：POST，
 url：/ manage / processadditem，
 data：$（＃add_form）。serialize（），$ b $ dataType：html，
 success：function（response，textStatus，XHR）
 {
 if（response.indexOf（'invalid'）> = 0 || response.indexOf（'Exception'）> = 0 ）{
 //向他们显示错误
 alert（response）; 
} 
 else {
 //上传项目图片
 //发送文件
 $（'＃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 / it emimage / test'}）; 
 alert（'如果性别为中性，应该将图片上传到cdn.completeset.com/items/test_nla.jpg'; 
 
 
 $ b错误：function（jqXHR，textStatus，errorThrown）{
 alert（'发生错误，请稍后再试。'）; 
} 
}）; 
  

我在文档这里可以使用send方法手动发送文件，如 $（' #fileupload'）。fileupload（'send'，{files：filesList}）; 这就是我想用来发送文件。不幸的是我没有从任何回调函数得到任何回应，我不知道为什么。

解决方案

我刚刚结束了在这里与malsup表单插件。 http://malsup.com/jquery/form/#ajaxForm 用blueImp for 2挣扎后几天后，我得到了这一个，并在几分钟内运行。

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.

解决方案

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.

这篇关于blueimp jQuery文件上传没有被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！