Question

我一直试图想出一个可以通过即时预览上传图像的解决方案。这一切都是通过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>

Answer 1

您似乎使用多个属性进行文件输入，您可以使用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不支持File API。

Jquery图像上传计数和限制

1 个答案: