Tải lên nhiều nút - một trang

Question

Tôi đang tạo trang web cho khách hàng và anh ấy muốn có thể có trong một trang, nhiều nút tải lên. Khi anh ta nhấp vào chọn tệp, hãy tải lên tệp tải lên máy chủ và sau đó thay đổi giá trị của trường nhập "Hình ảnh" thành đường dẫn của hình ảnh.

Vấn đề là tôi không thể tìm cách để có nhiều nút tải lên trong một trang, trong đó mỗi cá nhân sẽ điền vào trường "Hình ảnh" của div riêng. Và khách hàng sẽ có số lượng div trong cùng một trang.

Đây là mã js của tôi:

$(document).ready(function() { 
    $('.file_upload').uploadify({ 
    'uploader' : 'content/plugins/category_manager/upload/js/uploadify.swf', 
    'script' : 'content/plugins/category_manager/upload/upload.php', 
    'cancelImg' : 'content/plugins/category_manager/upload/js/cancel.png', 
    'folder' : 'content/plugins/category_manager/upload/uploads', 
    'fileExt'  : '*.jpg;*.gif;*.png', 
    'fileDesc'  : 'Image Files', 
    'auto'  : true, 
    'onComplete' : function(event, ID, fileObj, response, data) { 
     $("input[name=image]").empty(this).val(fileObj.name); 
     } 
    }); 
}); 

Answer 1

Mã này:

jQuery(".file_upload").each(function() { 
    jQuery(this).uploadify({ 
     height  : 30, 
     swf   : '/uploadify/uploadify.swf', 
     uploader  : '/script/uploadify/uploadify.php', 
     width   : 120 
    }); 
}); 

công trình rất tốt.

Điều này cũng yêu cầu các id trong các yếu tố .file_upload là duy nhất, ngay cả khi chúng không được sử dụng.

Answer 2

Vâng thay vì gọi Uploadify mỗi một lớp css, bạn cần phải gọi Uploadify cho một ID cụ thể, nếu không nó sẽ không làm việc.

Vì vậy, bạn sẽ cần:

$('#upload1').uploadify({ 
$('#upload2').uploadify((

vv ....

Answer 3

tôi đã cùng một vấn đề chính xác này. Tôi nghĩ những gì bạn sẽ muốn làm là kiểm soát người dùng cho từng trường hợp tải lên mà bạn muốn có trên trang của mình. Ví dụ về kiểm soát Uploadify làm việc của tôi:

//ascx 
<style type="text/css"> 
.hidden { display:none; } 
</style> 

<script src="/Uploadify/jquery.uploadify.v2.1.4.js" type="text/javascript"></script> 
<script src="/Uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script> 
<script src="/Uploadify/swfobject.js" type="text/javascript"></script> 
<link href="/Uploadify/uploadify.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     var obj = document.getElementById('<%= this.fileInput.ClientID %>'); 

     $(obj).uploadify({ 
      'uploader': '/uploadify/uploadify.swf', 
      'script': '/_handlers/Upload.ashx', 
      'cancelImg': '/uploadify/cancel.png', 
      'auto': true, 
      'multi': true, 
      'fileDesc': 'Image Files', 
      'fileExt': document.getElementById('<%= this.uTypes.ClientID %>').value, 
      'buttonText': 'Choose Images', 
      'folder': '/' + document.getElementById('<%= this.fileDest.ClientID %>').value, 
      'onAllComplete': function (event, queueID, fileObj, response, data) { 
       var btn = document.getElementById('<%= this.uploadButton.ClientID %>').click(); 
      } 
     }); 
    }); 

</script> 

<input id="fileInput" name="fileInput" type="file" runat="server" style="display:none" /> 
<input id="fileDest" name="fileDest" type="text" runat="server" style="display:none"/> 
<input id="uTypes" name="uTypes" type="text" runat="server" style="display:none"/> 

<asp:Button ID="uploadButton" runat="server" CssClass="hidden" OnClick="uploadButton_Clicked" CausesValidation="false"/> 

Đây là mã đằng sau phần kiểm soát, một số các thông số mà bạn nhìn thấy được thông qua vào bên ngoài

//Code behind 
public partial class UploadifyUpload : System.Web.UI.UserControl 
{ 
    private string fileDestination; 
    public string FileDestination 
    { 
     get { return fileDestination; } 
     set { fileDestination = value; } 
    } 

    private string uploadTypes; 
    public string UploadTypes 
    { 
     get { return uploadTypes; } 
     set { uploadTypes = value; } 
    } 

    public event EventHandler UploadButtonClicked; 

    protected void Page_Load(object sender, EventArgs e) 
    {  
     string virtualPath = fileDestination.Replace(Request.PhysicalApplicationPath, "/"); 
     virtualPath = virtualPath.Replace('\\', '/'); 
     this.fileDest.Value = virtualPath; 
     this.uTypes.Value = uploadTypes; 
    } 

    protected void uploadButton_Clicked(object sender, EventArgs e) 
    { 
     if (this.UploadButtonClicked != null) 
     { 
      this.UploadButtonClicked(this, new EventArgs()); 
     } 
    } 
} 

tôi tạo sự kiểm soát như thế này và vượt qua trong một vài biến. Sự kiện tệp đích và nhấp chuột được xử lý trong codebehind của bất kỳ trang nào đang sử dụng điều khiển.

<mgmtControls:UploadifyUpload ID="uploadifyUpload" runat="server" UploadTypes="*.jpg;*.png;*.gif;*.bmp;*.jpeg" /> 

this.uploadifyUpload.UploadButtonClicked += new EventHandler(UploadifyUploadClicked); 
this.uploadifyUpload.FileDestination = DocumentPath; 

Điều này phù hợp với tôi trong Firefox, Chrome và IE, nó sẽ dẫn bạn đi đúng hướng. Bạn có thể muốn cân nhắc thêm tùy chọn tải lên mặc định nếu người dùng chưa cài đặt flash.

Answer 4

Tôi không chắc liệu các câu trả lời ở trên có bao gồm tải lên các phần tử được thêm động hay không (thông qua AJAX, sau khi trang đã được tải). Tôi phải đối mặt với vấn đề này. Sau đó, khi đọc "live()" chức năng trên API jQuery, tôi nhận ra nó có thể được thực hiện theo cách này:

$(document).ready(function(){ 
    $('.upload_child_photograph').live('uploadifyEvent', function(){ 
     var child_id = $(this).attr('id').replace('upload_child_photograph_', ""); 

     $('#upload_child_photograph_' + child_id).uploadify({ 
      'auto'  : false, 
      'swf'  : 'uploadify.swf', 
      'uploader' : 'uploadify.php', 
      'uploadLimit' : 10, 
      'multi': true, 
      'fileSizeLimit' : 0 
     }); 
    }); 

    $(".upload_child_photograph").trigger("uploadifyEvent"); 
});