Uploadify多个按钮 - 一个页面

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

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

enter image description here

这里是我的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); 
     } 
    }); 
});

来源

2012-01-24 Manolis

此代码：

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

作品非常精细。

这也要求在.file_upload元素的ID是唯一的，即使不使用它们。

来源

2012-06-29 09:45:29 Havanasud

这个解决方案对我很好。它在这个页面上需要更多的认可。谢谢。 – tmutton

这是一个很好的解决方案。我用'$'替换了“jQuery”，缩短了一点。谢谢@Havanasud。 –

我认为这应该没有每个循环。 – sumit

好，而不是调用uploadify每一个CSS类的，你需要调用uploadify特定ID，否则它不会工作。

所以，你将需要：

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

等....

来源

2012-01-24 22:35:17

我不知道如果我完全明白你的意思，但客户端必须能够运行uploadify实例n次，与将要创建的类别一样多。所以我不能那样手动。 – Manolis

然后创建一个循环，并动态添加它们。但是ID必须是唯一的。 –

我有此相同的问题。我认为你想要做的是为你想要在你的页面上展示的每个uploadify实例进行用户控制。我的工作uploadify控制的实例：

//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"/>

这是背后的控制的部分代码，您看到传递在外部

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

我创建这样的控制和传递的参数几个变量。文件目标和单击事件在任何使用该控件的页面的代码隐藏中处理。

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

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

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

Multiple buttons working

来源

2012-01-24 23:41:37

我不确定上述答案是否覆盖了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"); 
});

来源

2013-06-06 09:02:20 MindHacker

Uploadify多个按钮 - 一个页面

回答

相关问题