验证html中强制存在的文件输入类型

时间:2011-08-18 10:42:25

标签: javascript jquery

我有一个包含文件上传cfgfile

的表单的弹出窗口
<form id="mainForm" method="post" enctype="multipart/form-data" action="">
            <input type="hidden" id="resulttype" value="Create"/>
            <input type="hidden" id="sessiontoken" name="sessiontoken" />
            <input type="hidden" id="cfgid" name="cfgid"/>
            <img  id="titleImage" alt="title" src="/csm/view/images/creat_conform_title.gif" width="216" hspace="4" height="17" vspace="4"/>&nbsp;&nbsp;
            <table id="popupInfo" align="center" width="90%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>To create a new configuration,please download the CSMClient Utility from the "Download CSMClient" option.Run the utility in your environment and upload the generated output XML file.</td>
              </tr>
            </table>&nbsp;
            <table id="downloadLinks" align="center" cellpadding="2" width="90%" border="0" cellspacing="0">
                <tr><td>
                <input name="Button1" type="button" onclick="openDownloadPage()"  id="button1" value="Download CSMClient" class="btn" />&nbsp;
                <a href="https://my-prod.informatica.com/infakb/howto/1/Pages/31738.aspx" target='_new' >How to run CSMClient</a></td></tr>
            </table>
            <table align="center" class="csm-table" width="90%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="middle" width="30%" >Name </td>
                    <td width="70%"><input type="text" id="cfgname" name="cfgname" tabindex="1" size="26" maxlength="64" value="" /> </td>
                </tr>   
                <tr>
                  <td valign="middle" height="65">Description </td>
                  <td height="65">
                  <textarea type="text" class="dis_box" tabindex="2" id="cfgdesc" name="cfgdesc"  ></textarea>    
                  </td>
                </tr>
                <tr valign="middle"><tr>
                <td>Type</td><td>
                <select type="select" id="cfgenv" name="cfgenv" tabindex="3">
                    <option value="Production" >Production&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                    <option value="Development" >Development</option>
                    <option value="Test/QA" >Test/QA</option>
                </select></td></tr>
                <tr valign="middle"><td>Upload CSMClient Output File</td>
                    <!-- <td><input type="file" id="cfgfile" name="cfgfile" tabindex="4"  class="multi"  maxlength="1" accept="xml" id="filefield" ></td>-->
                    <td id="filetd"><input type="file" id="cfgfile" name="cfgfile" tabindex="4" /></td>
                </tr>
            </table>
            <table align="center" border="0" cellpadding="10" cellspacing="0" width="84%">
            <tr>
                <td colspan="3" align="center">
                    <label>
                        <input type="submit"  tabindex="5"  value="Create Configuration" id="btnSummary" class="btn" onClick="" />
                        <!--<input  type="button"  tabindex="5"  value="Create Configuration" id="btnSummary" class="btn" onClick="micoxUpload('postUploadInfo','Loading...','Error in upload'); return false;" />-->
                        <!--onClick="micoxUpload(this.form,'/csm/upload','postUploadInfo','Loading...','Error in upload'); return false;"-->
                    </label>
                        &nbsp;
                    <label>
                        <input type="button"  tabindex="6" value="Cancel" id="btnCancel" class="btn"/>
                    </label>
                </td>
              </tr>
            </table>
        </form>

当我重新加载弹出窗口时,前一个值出现在其中,由于我们无法设置输入文件类型的值,我将删除cfgfile并动态创建具有相同ID的新值。

var fileholder = document.createElement("input");
fileholder.name="cfgfile";
fileholder.type="file";

$('#cfgfile').remove();
$('#filetd').empty();
$("#filetd").append(fileholder);

直到这里一切都很完美。但是如何验证用户是否选择了任何文件?我使用下面的代码,但是我一直得到EMPTY。总结如何验证我的输入文件类型以检查用户是否输入了任何内容。

if($.trim($("#cfgfile").val()) === "")
    {
        alert("EMPTY");
        event.preventDefault();
    }

1 个答案:

答案 0 :(得分:2)

重新加载页面时,您要设置名称,而不是脚本中的ID,因此#cfgfile选择器与任何内容都不匹配。尝试:

var fileholder = document.createElement("input");
fileholder.name="cfgfile";
fileholder.type="file";
fileholder.id = "cfgfile";

由于你已经在使用jQuery,你可以这样做:

var fileholder = $("<input/>" , {
    type: "file",
    id: "cfgfile",
    name: "cfgfile"
});    
$("#filetd").append(fileholder);