Przesyłanie plików jQuery: sposób dynamicznego zmieniania adresu URL przesyłania

Question

Próbuję użyć blueimp jQuery File Upload w moim projekcie. Zaspokaja moje potrzeby dość dobrze, ale muszę zmienić dynamicznie pliki URL są ładowane dynamicznie po utworzeniu i skonfigurowaniu wtyczki. Zrobiłem dużo badań, ale niestety nie znalazłem nic przydatnego. Ogólnie mam przycisk do wybrania plików i akcji fileupload obejmujących rzeczywiste przesyłanie. Podstawowym stworzenie wygląda następująco:

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

i samą konfigurację:

function FileUploadConfig() { 

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

    //... some other code 
} 

To, co trzeba zrobić, to zmienić adres URL w tej konfiguracji, a następnie zadzwonić data.submit(). Znalazłem się, że ta konfiguracja jest zapisywana przy użyciu $.data() i starał się rozwiązać problem z takim kodem

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

Jednak to nie działa tak, jak chciałem.

Jakieś pomysły, jak to osiągnąć?

Answer 1

Mam dokonał tego, kiedy chciał mieć upload plików do adresu URL z innym identyfikatorem param ustawiając autoupload do true i wiązania fileuploadstart callback:

<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

dodać do Odpowiedź davbryna:

Wydaje mi się, że zdarzenie, do którego się zobowiązujesz, powinno znajdować się na pliku fileuploadadd, ponieważ plikuploadloadstart nie zawiera żadnych danych, a jedynie wydarzenie.

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

Answer 3

Cześć wydaje się być prostszy sposób to zrobić. Podałem mój kod poniżej. podstawowej wersji uplodify jest stąd http://www.startutorial.com/articles/view/21

Teraz co zrobiłem to ja dostaję wartości dla folderze od zmiennej. A następnie ładuję funkcję uploadify za każdym razem, gdy klikam na liście poniżej, te elementy listy są foldernames wewnątrz katalogu wysyłania root. Po kliknięciu otrzymuję tę nazwę i dołączam ją do rzeczywistej ścieżki do folderu i ponownie wywołuję funkcję uploadify.

Ale jeśli ciągle będę dzwonił, na ekranie pojawi się więcej przycisków przeglądania, więc usunąłem element #file_uploadUploader przed wywołaniem uploadify. Więc myślę, że problem został rozwiązany. przynajmniej dla mnie :)

Szukałem tego przez ostatnie dwa dni, ale w końcu dobrze jest rozwiązać to sam.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

Wystarczy przechwycić to tutaj dla potomności.

W obecnej jQuery-upload rev, nadpisać add (EVT, danych) funkcję i ustawić właściwość URL obiektu danych:

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

Answer 5

Oto ogólny przykład, jak można to zrobić:

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

Używam tego do zmiany adresu URL na podstawie wyniku zwracanego przez skrypt wysyłania, dlatego ustawiam new_url = data.result.new_url na początku wykonanego wywołania zwrotnego.

Answer 6

To powinno wystarczyć (podobnie do użytkownika @ Aneon odpowiedzi) wydaje się działać dla mnie:

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

Złożenie formularza w dowolnym momencie po to wywołanie funkcji użyje nowego adresu URL

(mój kod przesyła się natychmiast po wybraniu obrazu, nie przetestowano ręcznego wywołania połączenia).

Answer 7

Oprócz odpowiedzi davbryn za: Ciąg

var że = $ (this) .data ('FileUpload');

powinno zostać zastąpione niniejszym

var że = $ (this) .data ('blueimpFileupload');

Answer 8

Wyrejestruj wtyczkę z elementu, a następnie zarejestruj ją ponownie, podając nowy adres URL.

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

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

Answer 9

Trzeba dodać .bind ('fileuploadsubmit') część. Zobacz poniższy przykład:

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

Musisz wiążą, termin fileuploadadd.

Załóżmy, że uratował dynamicznego adresu URL w ukrytym wejściem nazwie „dynamicURL” to należy to zrobić:

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