2016-04-20 82 views
0

我已經使用dragAndDrop:reportDirectoryPaths選項成功實現了使用Fine Uploader上傳目錄結構。上傳的每個文件都有它的qqpath屬性來表示它來自哪個路徑。是否可以通過AJAX按順序上傳文件?

var exampleUploader = new qq.FineUploader({ 
    element: document.getElementById('fine-uploader'), 
    template: 'qq-template-manual-trigger', 
    request: { 
     endpoint: '/api/UploadDocuments', 
     params: { 
      param1: "Test1", 
      param2: "Test2" 
     } 
    }, 
    callbacks: { 
     onComplete: function (id, name, responseJSON, xhr) { 
      console.log("onComplete"); 
     }, 
     onAllComplete: function (id, name, responseJSON, xhr) { 
      console.log("onAllComplete"); 
     } 
    }, 
    multiple: true, 
    dragAndDrop: { 
     reportDirectoryPaths: true 
    }, 
    autoUpload: true, 
    debug: false 
}); 

然而,有一個問題:文件被逐個上傳,但有時同時調用ajax請求。如果兩個具有相同目錄結構的文件在同一時間傳遞給服務,則可能一次創建兩次目錄。有沒有辦法只在前一次成功執行ajax請求?換句話說,是否有一種方法可以順序地上傳文件,而不是同時上傳(一堆文件一次傳遞到服務中)?

由於提前, AJ

+0

肯定的,只是有ajax調用的成功處理程序重新調用它自己(例如遞歸)。所以調用#1上傳文件#1。當該調用返回時,它會再次調用自身並啓動文件#2等,另一方面,這可能是效率低下/緩慢,因爲您正在爲每個文件分別進行http上傳。你可以在文件中包含測序數據,這樣服務器就可以知道它是哪一個。例如'的file1 = sometext; file2 = othertext'並且從服務器名稱中提取數字:'file1' - >'1',「啊,這是第一個文件,創建目錄#2」,然後「啊,這是文件2,所以創建目錄#1「 –

+0

您是否嘗試過使用Fine Uploader進行此操作,或者您是否熟悉該控件? – ajh

回答

0

你所看到的問題是您的服務器的問題,並且不與任何客戶端/瀏覽器端。將您的前端一次限制爲一個請求是短視的。這提出了完全不必要的瓶頸。你的服務器應該排除所有這些。

一種方法是使用Fine Uploader分配的UUID鍵入上傳的文件,然後再對存儲層次進行分類。如果您不想相信Fine Uploader提供的UUID,您可以始終生成自己的服務器端,並將其返回給響應,Fine Uploader將使用該服務器來處理與該特定文件相關的所有其他請求。

另一種方法是讓服務器只檢查服務器端以查看目標文件是否已經存在目錄。

請記住,您所依賴的此「qqPath」屬性僅存在於Chrome/Opera中,並且僅在刪除目錄時才存在。

+0

感謝您的快速回復。你是否說在上傳另一個文件之前沒有辦法等待成功響應?我明白你在說什麼,並且你提出了很多好的觀點。這怎麼能用RESTful服務實現呢?並假設我們做了你所提到的,那麼我們的服務器如何知道上傳是否真正完成(是否有30或40個文件)? – ajh

+0

據我所知,在上傳您的案例中的其他文件之前,沒有充分的理由等待成功響應。您知道何時上傳完成客戶端。 Fine Uploader會調用你的['onAllComplete'回調處理程序](http://docs.fineuploader.com/branch/master/api/events.html#allComplete)。在這一點上,你可以通知你的服務器。當一組提交的文件都完成上傳時,這將被解僱。 –

+1

非常感謝您的幫助。 – ajh

0

如果你想通過一個用細上傳的最簡單方法是限制最大連接上傳文件之一1.

var exampleUploader = new qq.FineUploader({ 
    element: document.getElementById('fine-uploader'), 
    template: 'qq-template-manual-trigger', 
    request: { 
     endpoint: '/api/UploadDocuments', 
     params: { 
      param1: "Test1", 
      param2: "Test2" 
     } 
    }, 
    callbacks: { 
     onComplete: function (id, name, responseJSON, xhr) { 
      console.log("onComplete"); 
     }, 
     onAllComplete: function (id, name, responseJSON, xhr) { 
      console.log("onAllComplete"); 
     } 
    }, 
    maxConnections: 1, 
    multiple: true, 
    dragAndDrop: { 
     reportDirectoryPaths: true 
    }, 
    autoUpload: true, 
    debug: false 
}); 

默認的參數MAXCONNECTIONS爲3