jQuery文件上傳：如何動態更改上傳網址

Question

我正在嘗試在我的項目中使用blueimp jQuery File Upload。它非常適合我的需求，但我需要更改創建和配置插件後動態上傳的url文件。我做了很多調查，但不幸的是，沒有發現任何用處。一般來說，我有一個按鈕來選擇文件和文件上傳操作，覆蓋實際上傳。基本的創作是這樣的：

$('[upload-button]').fileupload(new FileUploadConfig()) 

而且配置本身：

function FileUploadConfig() { 

    // is set to a unique value for each file upload 
    this.url = 'temporary'; 
    this.fileInput = $('[upload-button]'); 

    //... some other code 
} 

我需要做的就是改變這種配置的URL，然後調用data.submit()。我發現，這個配置是使用$.data()保存，並試圖用這樣的代碼

// get the current fileupload configuration 
var config = $.data($('[upload-button]').get(0), 'fileupload'); 

// change the url configuration option 
config.options.url = file.link; 

//send a file 
data.submit(); 

來解決這個問題。然而，這並不工作，我想要的方式。

有關如何完成此任何想法？

Answer 1

我已經做到了這一點，當我想有一個文件上傳到一個不同的ID PARAM的URL設置autoupload到true和有約束力的fileuploadstart回調：

<script type='text/javascript'> 
    $(function() { 
     'use strict'; 
     $('#fileupload').fileupload({ 
      url: 'originalurl/dest/1' 
      autoUpload: true    
     }).bind('fileuploadadd', function (e, data) { 
      var that = $(this).data('fileupload');    
      that.options.url = 'originalurl/dest/' + $("#selctedlocation").val(); 

     }); 
    }); 

Answer 2

爲了增加davbryn的回答：

我認爲你綁定的事件應該在fileuploadadd上，因爲fileuploadstart不會給你任何數據，它只是給你一個事件。

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

Answer 3

您好似乎是做一個簡單的方法。我把我的代碼放在下面。 uplodify的基本版本是從這裏 http://www.startutorial.com/articles/view/21

現在我所做的是我得到的值從變量文件夾。然後我每次點擊下面的列表項時加載uploadify函數，這些列表項是根上傳目錄中的文件夾名。所以當我點擊它們時，我會得到該名稱並將其附加到實際的文件夾路徑並再次調用uploadify。

但是，如果我一次又一次地調用它，屏幕上會出現更多的瀏覽按鈕，所以我在調用uploadify之前刪除了元素#file_uploadUploader。所以我想這個問題已經解決了。至少對我來說:)

過去兩天一直在尋找這個，但最後感覺自己很好解決它。B-）

---

HTML

<input id="file_upload" name="file_upload" type="file" /> 

• jerry1
• jerry3
• jerry2

---

jQuery的

$(document).ready(function() { 

var uploadfer = 'uploads/jerry2'; 


$("ul li").click(function(){ 
uploadfer = "uploads/"+$(this).text()+"/"; 
alert(uploadfer); 

$('#file_uploadUploader').remove(); 

$('#file_upload').uploadify({ 
'uploader' : 'js/uploadify.swf', 
'script' : 'upload.php', 
'cancelImg' : 'js/cancel.png', 
'folder' : uploadfer, 
'auto'  : true 
}); 


}); 

$('#file_upload').uploadify({ 
'uploader' : 'js/uploadify.swf', 
'script' : 'upload.php', 
'cancelImg' : 'js/cancel.png', 
'folder' : uploadfer, 
'auto'  : true 
}); 




}); 

Answer 4

就捕捉這個這裏後人。

在目前的jQuery上傳REV，覆蓋加（EVT，數據）功能，並設置數據對象的url屬性：

fileupload({ 
    add: function(e, data) { 
     data.url = 'customURL' 
     ... 
    }, 
    ... 
} 

Answer 5

這裏有一個普通的例子，你會怎麼做：

$('#fileupload').fileupload({ 
    url: initial_url, 
    done: function (e, data) { 
     $(this).fileupload('option', 'url', new_url); 
    } 
}); 

我使用它來根據上傳腳本返回的結果來更改URL，所以我在done回調開始時設置了new_url = data.result.new_url。

Answer 6

這應該這樣做，（類似@ Aneon的答案）似乎爲我工作：

var file = { link: "http://thenewurl" }; 

// I used a form element to create the fileupload widget 
$('[upload-button]').fileupload("option", "url", file.link); 

// Submit the form 
$('[upload-button]').submit(); 

在任何時候提交表單後調用該函數將使用新的URL

（我代碼一旦提交作爲圖像被選擇時，沒有測試手動提交呼叫）。

Answer 7

除了davbryn的回答是： 此字符串

VAR是= $（本）。數據（ '文件上傳'）;

應由這個

變種那= $被替換（本）。數據（ 'blueimpFileupload'）;

Answer 8

註銷從元素的插件，然後用一個新的URL重新註冊。

$('#pictureUpload, #pictureUpload *').unbind().removeData(); 

$('#pictureUpload').fileupload({ 
... 
}); 

Answer 9

您需要添加.bind（ 'fileuploadsubmit'）一部分。見下面的例子：

function fnFileUpload(id, urlFunc, successurl) { 
    $(id).fileupload({ 
     url: urlFunc(), 
     dataType: 'json', 
     maxFileSize: 10000000, 
     singleFileUploads: true, 
     done: function (e, data) { 
      $(this).fileupload('option', 'url', urlFunc()); 
      if (data.result.respType == 'S') { 
       window.location.href = successurl; 
      } else { 
       toastr.error(data.result.respDesc, data.result.respTitle); 
       var progress = 0; 
       $('#progress .progress-bar').css(
        'width', 
        progress + '%' 
       ); 
      } 
     }, 
     progressall: function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('#progress .progress-bar').css(
       'width', 
       progress + '%' 
      ); 
     } 
    }).bind('fileuploadsubmit', function (e, data) { 
     $(this).fileupload('option', 'url', urlFunc()); 
    }); 
} 

Answer 10

您需要綁定的fileuploadadd事件。

假設你在一個名爲「dynamicURL」的隱藏輸入保存在動態URL，那麼你應該這樣做：

$('#fileupload').fileupload({ 
    // Other options here 
}).bind('fileuploadadd', function (e, data) { 
    data.url = $('input[name="dynamicURL"]').val(); 
});