jQuery-Datei-Upload: wie die Upload-URL dynamisch zu ändern

Question

Ich versuche, die Blueimp jQuery File Upload in meinem Projekt zu verwenden. Es passt ziemlich gut zu meinen Bedürfnissen, aber ich muss die URL-Dateien ändern, die hochgeladen werden, nachdem das Plugin erstellt und konfiguriert wurde. Ich habe viel Nachforschungen angestellt, aber leider nichts Nützliches gefunden. Im Allgemeinen habe ich eine Schaltfläche, um Dateien und Dateiupload-Aktion für den eigentlichen Upload zu wählen. Die grundlegende Schöpfung sieht wie folgt aus:

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

und Konfiguration selbst:

function FileUploadConfig() { 

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

    //... some other code 
} 

Das, was ich tun müssen, ist die URL in dieser Konfiguration ändern und dann data.submit() nennen. Ich habe herausgefunden, dass diese Konfiguration gespeichert wird mit $.data() und versucht, das Problem mit einem solchen Code

// 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(); 

jedoch zu lösen, ist dies nicht die Art und Weise funktioniert die ich wollte.

Irgendwelche Ideen, wie dies zu erreichen ist?

Answer 1

Ich habe dies erreicht, wenn ich eine Datei-Upload auf eine URL mit einer anderen ID param haben wollte, indem autoupload zu true und Binden des fileuploadstart Rückruf: zu

<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

hinzufügen davbryns Antwort:

Ich denke, das Ereignis, an das Sie binden, sollte auf einem fileuploadadd sein, da fileuploadstart Ihnen keine Daten gibt, es gibt Ihnen nur ein Ereignis.

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

Answer 3

Hallo scheint es ein einfacherer Weg, um es zu tun. Ich habe meinen Code unten eingefügt. Die Basisversion von uplodify von hier ist http://www.startutorial.com/articles/view/21

Nun, was ich getan habe, ist ich die Werte für Ordner aus einer Variablen immer bin. Und dann lade ich die uploadify-Funktion jedes Mal, wenn ich auf den Listeneintrag unten klicke, diese Listeneinträge sind Ordnernamen innerhalb des Root-Upload-Verzeichnisses. Wenn ich also auf sie klicke, bekomme ich diesen Namen und füge ihn an den Pfad des aktuellen Ordners an und rufe den Uploadify erneut auf.

Aber dann, wenn ich es immer wieder anrufe, wird es mehr Schaltflächen auf dem Bildschirm erscheinen, so dass ich nur das Element #file_uploadUploader vor dem Aufruf der Uploadify entfernt. Also ich denke, das Problem ist gelöst. zumindest für mich :)

Schon seit zwei Tagen suche ich mich, aber endlich fühlt es sich gut an, es selbst zu lösen.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

Einfach hier für die Nachwelt erfassen.

In dem aktuellen jQuery-Upload rev, überschreibt die add (evt, Daten) Funktion und die URL-Eigenschaft des Datenobjekts festgelegt:

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

Answer 5

Hier ist ein allgemeines Beispiel, wie Sie könnten dies tun:

Ich benutze dies um die URL zu ändern, basierend auf dem Ergebnis des Upload-Skripts, also setze ich new_url = data.result.new_url am Anfang des done Callbacks.

Answer 6

Dies sollte es tun, (ähnlich @ Aneon Antwort) scheint für mich zu arbeiten:

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(); 

das Formular an einem beliebigen Punkt Einreichen nach diesem Funktionsaufruf

die neue URL

verwenden (mein Code übermittelt, sobald das Bild ausgewählt ist, habe den manuellen Submit-Call nicht getestet).

Answer 7

Neben davbryn Antwort: Diese Saite

var dass = $ (this) .data ('Fileupload');

sollte dieses

var ersetzt werden, die $ (this) .data ('blueimpFileupload') =;

Answer 8

Heben Sie die Registrierung des Plugins vom Element auf und registrieren Sie es anschließend erneut mit einer neuen URL.

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

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

Answer 9

Sie benötigen .bind ('fileuploadsubmit') Teil hinzuzufügen. Siehe Beispiel unten:

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

Sie müssen binden die fileuploadadd Ereignis.

Angenommen, Sie die dynamische URL in einem versteckten Eingang gespeichert namens „dynamicURL“ dann sollten Sie dies tun:

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