jquery - アップロードボタンを無効にする方法

Question

Uploadifyを使用している複数ファイルアップローダーを設計しようとしています。5 つのアップロードボタンがあります。私が望むのは、ページの読み込み時に最初の 1 つを有効にし、他の 4 つを無効にすることです。最初のボタンでファイルのアップロードが成功すると、2 番目のボタンが有効になります。

検索してみましたが、アップローダーを非表示にすることを提案する投稿がいくつかありました (height = 0)。

私はready関数でこのようなことを試しました

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

score 2 · Accepted Answer

1 つ目はボタンを「隠す」方法で、2 つ目はボタンを「無効にする」方法です。

最初のオプション (開始する前に、最後の 4 つのボタンが非表示になっていることを確認してください):

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

2番目のオプション:

'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>

jquery - アップロードボタンを無効にする方法

1 に答える 1

Related

Reference