2016-04-20 48 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