用于文件上传的Java Script验证

本文关键字：Java Script 验证 文件 用于 | 更新日期: 2023-09-27 17:52:16

我在产品添加表单的JavaScript验证中卡住了。

在该页面中，我有文件上传控件来上传产品图像。我不知道如何使用JavaScript验证。

如果图像没有上传到该控件，我想在标签中显示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" >

用于文件上传的Java Script验证

使用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) {
    ...

您可以像这样使用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();"  />

<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>
相关文章：