Question

我在产品添加表单中遇到了JavaScript验证。

在该页面中，我有文件上传控件来上传产品图片。我没有得到如何使用JavaScript验证它。

如果图片未上传到该控件，我想在Label中显示Upload Image消息。

如何做到这一点？请帮帮我。

我写的脚本是：

var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
if (fileup == "") 
{
   document.getElementById("lblFileUploadImg").innerHTML = "<font color='red'>
   Upload Image File</font>";

   document.getElementById('<%=FileUploadImg.ClientID %>').focus();
   return false;
} 
else 
{
    document.getElementById("lblFileUploadImg").innerHTML = "";
}

我使用的控件是：

 <asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
 <asp:Label ID="lblFileUploadImg" runat="server" >

Answer 1

使用jQuery，您可以简单地执行此操作：

$('#myFile').bind('change', function() {
    if(this.files[0].size>...){
        alert('File is too big');
    };

});

也许这就是你要找的东西：

$("input:file").change(function () {
    if ($(this).val() !== "") {
        var ul_file = $(this).val();
        var extension = ul_file.substr((ul_file.lastIndexOf('.') + 1));
        var accepted_file_endings = ["jpg", "jpeg", "bmp", "gif", "tif", "png"];
        extension = extension.toLowerCase()
        if ($.inArray(extension, accepted_file_endings) !== -1) {
    ...

Answer 2

您可以使用这样的JavaScript来验证文件上传。

<script type="text/javascript">
        function validate() {
            var uploadcontrol = document.getElementById('<%=FileUploadImg.ClientID%>').value;

            //Regular Expression for fileupload control.
            var reg = /(.doc|.docx|.pdf)$/i;

            if (uploadcontrol.length > 0)
            {
                //Checks with the control value.
                if (reg.test(uploadcontrol))
                {
                    document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='green'>Upload Image File</font>";
                    return true;
                }
                else 
                {
                    //If the condition not satisfied shows error message.
                    document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "Error while upload image";
                    return false;
                }
            }
        } //End of function validate.
    </script>


<asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
<asp:Label ID="lblFileUploadImg" runat="server" />
<asp:Button runat="server" Text="Upload" ID="btnupload" onclientclick="return validate();"  />

Answer 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function Validate() {
            var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
            if (fileup == "") {
                document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='red'>Upload Image File</font>";

                document.getElementById('<%=FileUploadImg.ClientID %>').focus();
                return false;
            }
            else {
                document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "";
                return true;
            }
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUploadImg" runat="server" />
        <asp:Label ID="lblFileUploadImg" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return Validate();" />
    </div>
    </form>
</body>
</html>

Javascript验证文件上传

3 个答案: