javascript - 验证文件输入类型以强制存在于 html 中

Question

我有一个弹出窗口，其中包含一个包含文件上传 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();
    }

Answer 1

当您重新加载页面时，您设置的是名称，而不是脚本中的 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);