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 回答