上传多个按钮 – 一页

我正在为客户创建一个网站，他希望能够在一个页面中有许多上传按钮。 当他点击选择文件时，uploadify将文件上传到服务器，然后将输入字段“Image”的值更改为图像的路径。

问题是我找不到在一个页面中有多个上传按钮的方法，其中每个按钮单独填充它自己的div的“图像”字段。 并且客户端将在同一页面中具有n个div。

这是我的js代码：

$(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

这段代码：

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

工作得很好。

这还要求.file_upload元素中的id是唯一的，即使它们未被使用也是如此。

Answer 2

好吧，不是每个css类调用uploadify，而是需要为特定ID调用uploadify，否则它不会起作用。

所以你需要：

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

等等….

Answer 3

我有同样的问题。 我认为您要做的是为您希望在页面上拥有的每个uploadify实例进行用户控制。 我的工作uploadify控件的示例：

  //ascx           

这是控件后面的代码部分，您看到的一些参数是从外部传递的

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

我像这样创建控件并传入一些变量。 文件目标和单击事件在使用该控件的任何页面的代码隐藏中处理。

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

这对我在Firefox，Chrome和IE中非常有用，它应该引导您朝着正确的方向前进。 如果用户没有安装闪存，您可能需要考虑添加默认上载选项。

Answer 4

我不确定上面的答案是否涵盖了动态添加的uploadify元素（在页面加载后通过AJAX）。 我遇到了这个问题。 然后在读取jQuery API上的“ live（） ”函数时，我意识到它可以这样做：

 $(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"); });