2013-07-25 75 views
1

如果已經實現了良好的上傳器並可以上傳文件。我還將允許的擴展名設置爲僅允許PDF。FineUploader不顯示錯誤消息

但是,當我嘗試上傳和JPG例如什麼都沒有發生。

通常這不是問題,但我希望看到一條消息。這適用於fineuploader網站,但不適合我。

希望有人能幫助我。

代碼:

createUpload({ button: $('#dienstverleningsDocumentUploader'), 
endpoint:'/adviseur/profile/dienstverleningsDocument/' + '@Model.Adviseur.ServiceDocumentID', 
messages: $('#dienstverleningsDocumentMessage'), allowedExtensions: ['pdf'] }); 

function createUpload(options) { 
var button = options.button[0];//Should be a jQuery $(...) 
var endpoint = options.endpoint; 
var allowedExtensions = options.allowedExtensions || ['doc', 'xls', 'docx', 'xlsx', 'pdf']; 
var sizeLimit = options.sizeLimit || 10000000;// 10Mb 
var itemLimit = options.itemLimit || 10; 
var messages = options.messages || $('#messages'); 
var complete = options.complete; 

return new qq.FineUploaderBasic({ 
    button: button, 
    request: { 
     endpoint: endpoint 
    }, 
    validation: { 
     allowedExtensions: allowedExtensions, 
     sizeLimit: sizeLimit, 
     itemLimit: itemLimit 
    }, 
    callbacks: { 
     onSubmit: function (id, fileName) { 
      messages.html('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>'); 
     }, 
     onUpload: function (id, fileName) { 
      $('#file-' + id).addClass('alert-info') 
          .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' + 
            'Initializing ' + 
            '「' + fileName + '」'); 
     }, 
     onProgress: function (id, fileName, loaded, total) { 
      if (loaded < total) { 
       progress = Math.round(loaded/total * 100) + '% of ' + Math.round(total/1024) + ' kB'; 
       $('#file-' + id).removeClass('alert-info') 
           .html('<img src="client/loading.gif" alt="In progress. Please hold."> ' + 
             'Uploading ' + 
             '「' + fileName + '」 ' + 
             progress); 
      } else { 
       $('#file-' + id).addClass('alert-info') 
           .html('<img src="client/loading.gif" alt="Saving. Please hold."> ' + 
             'Saving ' + 
             '「' + fileName + '」'); 
      } 
     }, 
     onComplete: function (id, fileName, responseJSON) { 
      if (responseJSON.success) { 
       $('#file-' + id).removeClass('alert-info') 
           .addClass('alert-success') 
           .html('<i class="icon-ok"></i> ' + 
             '「' + fileName + '」' + 
             'succesvol.' 
            ); 
       if (complete) { 
        complete(fileName, responseJSON); 
       } 
      } else { 
       $('#file-' + id).removeClass('alert-info') 
           .addClass('alert-error') 
           .html('<i class="icon-exclamation-sign"></i> ' + 
             'Uploaden mislukt bij: ' + 
             '「' + fileName + '」: ' + 
             responseJSON.error); 
      } 
     } 
    } 
}); 
} 

回答

0

的主頁和文件明確指出,精細上傳的基本模式完全不提供任何UI元素。如果您使用Fine Uploader Basic模式,則預計您打算構建自己的UI並使用Fine Uploader的API和回調。所有錯誤消息(如驗證錯誤)都會發送到onError回調。您可以貢獻自己的onError回調處理程序並自己顯示錯誤消息。

例如,假設您在應用中使用bootbox.js。您的實例可能是這個樣子:

$('#uploaderContainer').fineUploader({ 
    uploaderType: 'basic', 
    button: $('#dienstverleningsDocumentUploader'), 
    request: { 
    endpoint: '/adviseur/profile/dienstverleningsDocument/' + '@Model.Adviseur.ServiceDocumentID',  
    }, 
    validation: { 
     allowedExtensions: ['pdf'], 
     sizeLimit: 10000000, 
     itemLimit: 10 
    } 
}) 
    .on('error', function(event, id, fileName, reason, maybeXhr) { 
     bootbox.alert(reason); 
    }); 

通知我使用jQuery的精細上傳插件,在我的例子。你也應該像你已經在你的項目中使用jQuery一樣。有關此插件的更多信息,請參閱文檔。

如果您想使用Fine Uploader附帶的默認UI並對其進行自定義,您應該使用FineUploader模式。這也在文檔中進一步解釋。