Tải lên tệp jQuery: cách thay đổi url tải lên động

Question

Tôi đang cố gắng sử dụng blueimp jQuery File Upload trong dự án của mình. Nó phù hợp với nhu cầu của tôi khá tốt nhưng tôi cần phải thay đổi các tập tin url được tải lên động sau khi các plugin được tạo ra và cấu hình. Tôi đã làm rất nhiều điều tra, nhưng, thật không may, không tìm thấy gì hữu ích. Nói chung, tôi có một nút để chọn tệp và tải lên hành động bao gồm việc tải lên thực tế. Việc tạo cơ bản trông như thế này:

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

Và cấu hình riêng của mình:

function FileUploadConfig() { 

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

    //... some other code 
} 

Điều tôi cần làm là thay đổi url trong cấu hình này và sau đó gọi data.submit(). Tôi đã phát hiện ra rằng cấu hình này được lưu sử dụng $.data() và cố gắng giải quyết vấn đề với mã như

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

Tuy nhiên, điều này không làm việc theo cách tôi muốn.

Bất kỳ ý tưởng nào về cách thực hiện điều này?

Answer 1

Tôi đã thực hiện điều này khi tôi muốn có một tải lên tập tin vào một url với một id param khác nhau bằng cách thiết lập autoupload để true và ràng buộc các 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

Để thêm vào Câu trả lời của davbryn:

Tôi nghĩ sự kiện bạn đang ràng buộc phải ở trên tệp tải lên vì tệp tải lên không cung cấp cho bạn bất kỳ dữ liệu nào, nó chỉ cung cấp cho bạn một sự kiện.

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

Answer 3

Xin chào, có vẻ là cách đơn giản hơn để thực hiện. Tôi đã đặt mã của tôi dưới đây. Phiên bản cơ sở của uplodify là từ đây http://www.startutorial.com/articles/view/21

Bây giờ những gì tôi đã làm là tôi nhận được các giá trị cho thư mục từ một biến. Và sau đó tôi tải chức năng uploadify mỗi khi tôi nhấp vào mục danh sách dưới đây, các mục danh sách này là tên thư mục bên trong thư mục tải lên gốc. Vì vậy, khi tôi nhấp vào chúng tôi lấy tên đó và nối nó vào đường dẫn thư mục thực tế và gọi lại uploadify.

Nhưng sau đó nếu tôi tiếp tục gọi nó một lần nữa và một lần nữa, sẽ có nhiều nút duyệt hơn appeding trên màn hình vì vậy tôi chỉ cần loại bỏ các yếu tố #file_uploadUploader trước khi gọi uploadify. Vì vậy, tôi đoán vấn đề được giải quyết. ít nhất là cho tôi :)

Đã tìm kiếm điều này trong hai ngày qua nhưng cuối cùng cũng cảm thấy tốt khi tự giải quyết nó.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

Chỉ cần chụp ảnh này ở đây để có hậu thế.

Trong rev jQuery-upload hiện tại, ghi đè lên các add (evt, dữ liệu) chức năng và thiết lập thuộc tính url của các đối tượng dữ liệu:

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

Answer 5

Dưới đây là một ví dụ nói chung làm thế nào bạn có thể làm điều này:

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

Tôi sử dụng điều này để thay đổi URL dựa trên kết quả được trả về bởi tập lệnh tải lên, vì vậy tôi đặt new_url = data.result.new_url vào đầu cuộc gọi được thực hiện.

Answer 6

này nên làm điều đó, (tương tự như câu trả lời @ Aneon của) dường như làm việc cho tôi:

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

Nộp theo hình thức bất cứ lúc nào sau khi gọi hàm này sẽ sử dụng các url mới

(của tôi mã sẽ gửi ngay khi hình ảnh được chọn, chưa thử nghiệm cuộc gọi gửi thủ công).

Answer 7

Ngoài câu trả lời davbryn của: Chuỗi này

var mà = $ (this) .data ('FileUpload');

nên được thay thế bằng điều này

var that = $ (this) .data ('blueimpFileupload');

Answer 8

Hủy đăng ký plugin khỏi phần tử và sau đó đăng ký lại bằng một URL mới.

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

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

Answer 9

Bạn cần phải thêm .bind ('fileuploadsubmit') phần. Xem ví dụ dưới đây:

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

Bạn cần phải bind sự kiện fileuploadadd.

Giả sử bạn đã lưu url động trong một đầu vào ẩn có tên "dynamicURL" thì bạn nên làm điều này:

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