jQueryファイルアップロード：アップロードURLを動的に変更する方法

Question

私のプロジェクトでブルーインプ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(); 

で問題を解決しようとしていること、を発見しました。

これを達成するためのアイデアはありますか？

私は trueに autouploadを設定し、 fileuploadstartコールバックを結合することによって、異なるIDのparamを持つURLへのファイルのアップロードを持っていると思ったとき、私はこれを達成しました

Answer 1

：

<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の答え：

私はfileuploadstartはfileuploadstartはあなたにデータを与えるわけではないので、それはあなたにイベントを与えるとfileuploadaddにあるべきだと思います。

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

Answer 3

こんにちは、それを行うための簡単な方法があるように思われます。私は下に私のコードを入れました。 uplodifyの基本バージョンは、ここで http://www.startutorial.com/articles/view/21

からである今、私がやった私は変数からフォルダの値を取得しています。下のリスト項目をクリックするたびにuploadify関数をロードします。これらのリスト項目はルートアップロードディレクトリ内のフォルダ名です。だから私はそれらをクリックすると、私はその名前を取得し、実際のフォルダのパスに追加し、再度uploadifyを呼び出します。

しかし、何度も何度も何度も呼び出すと、画面上に表示されるブラウズボタンが増えるので、uploadifyを呼び出す前に要素#file_uploadUploaderを削除しました。だから私は問題が解決されたと思います。少なくとも私のために:)

これを過去2日間検索していましたが、最終的にはそれを自分で解決することができました。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

は、ここであなたがこれを行う可能性がありますどのように一般的な例です：

私はこれを使用してアップロードスクリプトから返された結果に基づいて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が使用されます後イメージが選択されるとすぐにコードが送信され、手動送信呼び出しはテストされません）。 davbrynの答えに加えて

Answer 7

： この文字列

VAR = $（この）.dataセクション（ 'ファイルアップロード'）を、

は$（この）.dataセクション（ 'blueimpFileuploadを'）=この

varで交換する必要があります。

Answer 8

要素からプラグインを登録解除して、新しいURLで再度登録します。

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

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

Answer 9

あなたは.bind（ 'fileuploadsubmit'）一部を追加する必要があります。あなたはバインドfileuploadaddイベントに必要

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

：以下の例を参照してください。

は、あなたが「ダイナミックURL」という隠し入力で動的URLを保存した後、あなたがこれを行う必要があるとします

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