1

インスタントプレビューで画像をアップロードするための可能な解決策を考え出そうとしています。これはすべて J'Query を介して行われますが、ユーザーが許可されている以上のアップロードを試みた場合にアラートをスローしたいと考えています。

画像をアップロードするコード:

$(".share_button").click(function() 
        {
            var shareval = $("#share").val();
            var uploadvalues=$("#uploadvalues").val();
            var X = $('.preview').attr('id');

            if(X)
            {
                var Z = X+','+uploadvalues;
            }   
            else
            {
                var Z = 0;
                var dataString = 'share='+ shareval+'&uploads='+Z;
            }

            if($.trim(shareval).length==0)
            {
                alert("Please Enter Some Text");
            }
            else
            {
                // Hide No Shares If Visible
                $("#Nodata").slideUp();                    
                // Display Quick Update
                $("#flash").show();
                $("#flash").fadeIn(400).html('Posting Share...');
                $.ajax({
                    type: "POST",
                    url: "<?php echo SITE_PATH; ?>app/web/home/share_ajax.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {

                        $("#flash").fadeOut('slow');
                        $("#content").prepend(html);
                        $("#share").val('');   
                        $("#share").focus();
                        $('#preview').html('');
                        $('#uploadvalues').val('');
                        $('#photoimg').val('');
                    }
                });

                $("#preview").html('');
                $('#imageupload').slideUp('fast');
            }
            return false;
        });

テキストチェックの前にこれを配置することで解決できると思いました：

 if( $.trim(X).length > 2)
 {
   alert("Only Two Images No More");
 }

しかし、これはうまくいきませんでした。私は J'Query に熱中しているわけではありません。ヘルプやガイダンスをいただければ幸いです。

更新しました：

これは HTML マークアップです。

    <div id="imageupload" style="display:none;">        
    <form id="imageform" method="post" enctype="multipart/form-data" action='<?php echo SITE_PATH; ?>app/web/home/image_ajax.php'> 
        <!-- Upload Preview -->
        <div id="preview"></div>
        <!-- Upload Image -->
        <div class="clear"></div>
        <input type="file" name="photoimg" id="photoimg" style="display:none"/>
        <a id="upload-share-button" class="button" style="width:570px;text-align:center;margin:10px;">Upload Images</a>
        <input type='hidden' id='uploadvalues'/>
    </form>
</div>
4

1 に答える 1

0

ファイル入力に複数の属性を使用しているようです。オブジェクトlengthのプロパティを使用して、選択した画像/ファイルの長さを確認できます。files

var len = $("#uploadvalues").get(0).files.length;
if (len > 2) {
   alert("Only Two Images No More");
   return;
}

http://jsfiddle.net/T2Xhk/

Internet Explorer はファイル API をサポートしていないことに注意してください。

于 2012-12-30T13:11:17.067 に答える