1

我正在尝试设计一个我正在使用Uploadify的多文件上传器。我将有 5 个上传按钮。我想要的是启用第一个，而在页面加载时禁用其他 4 个。在第一个按钮中成功上传文件后，应启用第二个按钮，依此类推。

我试过搜索，但有一些帖子建议隐藏上传者（高度 = 0）。

我在准备好的功能中尝试过这样的事情

  $('#FileUpload2').fileUpload('enabled', false);
  $('#FileUpload3').fileUpload('enabled', false);
  $('#FileUpload4').fileUpload('enabled', false);
  $('#FileUpload5').fileUpload('enabled', false);

我不确定这是否正确。我试图尽可能清楚地说明这一点。如果可能，请为我提供替代解决方案。

更新

这是完整的代码

<head runat="server">
    <title></title>
     <link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
     <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.uploadify.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <div style = "padding:40px">
        <asp:FileUpload ID="FileUpload1" runat="server" />
    </div>
    <div id="fu2" style = "padding:40px;">
        <asp:FileUpload ID="FileUpload2" runat="server" />
    </div>
    <ul id="appendImg">

    </ul>
</form>
</body>
</html>
<script type = "text/javascript">
    $(document).ready(function () {
        // put all your jQuery goodness in here.

        $("#<%=FileUpload2.ClientID%>").uploadify('disable', true);

    });
    $(window).load(
    function () {
        $("#<%=FileUpload1.ClientID%>").fileUpload({
            'uploader': 'scripts/uploader.swf',
            'uploadLimit': 3,
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'Upload.ashx',
            'folder': 'uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onComplete': function (event, queueID, fileObj, response, data) {
                //alert(fileObj.filePath);
               // $('#kk').attr('src', "" + fileObj.filePath + "");
                var html = '';
                html += '<li><img src="' + fileObj.filePath + '" alt="" style="width:100px;height:100px;" /></li>';
                $('#appendImg').append(html);
                //$('#fu2').attr('style', 'padding:40px;display:block;');
            },
            'onAllComplete': function (event, queueID, fileObj, response, data) {

            },
            'onUploadSuccess': function (file, data, response) {
                $('#FileUpload1').uploadify('settings', 'height', 0);
                $('#FileUpload1').uploadify('settings', 'width', 0);
                $('#FileUpload2').uploadify('settings', 'height', 400);
                $('#FileUpload2').uploadify('settings', 'width', 400);
            }
        });


        $("#<%=FileUpload2.ClientID%>").fileUpload({
            'uploader': 'scripts/uploader.swf',
            'uploadLimit': 3,
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'Upload.ashx',
            'folder': 'uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'setDisabled':true,
            'onComplete': function (event, queueID, fileObj, response, data) {
                //alert(fileObj.filePath);
                // $('#kk').attr('src', "" + fileObj.filePath + "");
                var html = '';
                html += '<li><img src="' + fileObj.filePath + '" alt="" style="width:100px;height:100px;" /></li>';
                $('#appendImg').append(html);
            },
            'onAllComplete': function (event, queueID, fileObj, response, data) {

            }
        });
    }


);
</script>
4

1 回答 1

2

我知道您可以采取两条路线，第一条是您“隐藏”按钮，第二条您可以“禁用”按钮。

第一个选项（确保在开始之前隐藏最后 4 个按钮）：

'onUploadSuccess':function(file, data, response){
$('#FileUpload1').hide();
$('#FileUpload2').show(); 
}

第二种选择：

'onUploadSuccess':function(file, data, response){
    $('#FileUpload1').uploadify('settings', 'height', 0);
    $('#FileUpload1').uploadify('settings', 'width', 0);
    $('#FileUpload2').uploadify('settings', 'height', 400);  
    $('#FileUpload2').uploadify('settings', 'width', 400);
    }

希望这会有所帮助...这里使用的是默认的uploadify ....

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css"-->
<style type="text/css">
body {
    font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>

<body>
    <h1>Uploadify Demo</h1>
    <form>
        <div id="queue"></div>
        <input id="file_upload" name="file_upload" type="file" multiple="true">
        <input id="file_upload2" name="file_upload2" type="file" multiple="true">
    </form>

    <script type="text/javascript">
        <?php $timestamp = time();?>


        $(function() {
            $('#file_upload').uploadify({
                'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                'swf'      : 'uploadify.swf',
                'uploader' : 'uploadify.php',
                'onUploadSuccess':function(file, data, response){
                $('#file_upload').uploadify('settings', 'height', 0);
                $('#file_upload').uploadify('settings', 'width', 0);
                $('#file_upload2').uploadify('settings', 'height', 400);  
                $('#file_upload2').uploadify('settings', 'width', 400);
                }
            });
        });
    </script>
    <script type="text/javascript">
        <?php $timestamp = time();?>
        $(function() {
            $('#file_upload2').uploadify({
                'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                'swf'      : 'uploadify.swf',
                'uploader' : 'uploadify.php',
                'onUploadSuccess':function(file, data, response){
                $('#file_upload2').uploadify('settings', 'height', 0);
                $('#file_upload2').uploadify('settings', 'width', 0);
                },
                'onSWFReady' : function() {
                $('#file_upload2').uploadify('settings', 'height', 0);
                $('#file_upload2').uploadify('settings', 'width', 0);
        }
            });
        });
    </script>
</body>
</html>
于 2012-11-04T09:14:42.693 回答