如果所选文件不是特定类型，则使用 JavaScript 或 JQuery 清除文件上传字段

Question

我基本上重新设计了一个文件上传表单域。

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

我无法使用 vanilla CSS 显示所选文件的名称，所以这个项目变得有点复杂。

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

这是 JSFiddle。

http://jsfiddle.net/ccsGK/1532/

到目前为止进展顺利，但我需要对选择上传的文件进行客户端验证。

例如：我只想允许 .pdf 或 .docx 扩展名。如果所选文件与该扩展名不匹配，是否有办法清除文件上传字段？也许添加一个提醒，让此人知道他们的文件已被清除或格式不正确？

Answer 1

您可以简单地使用正则表达式来检查它是否具有该扩展名。如果是，请执行任何操作（将值添加到禁用字段）。如果否，请执行任何操作（取消上传，显示警报）。

document.getElementById("uploadBtn").onchange = function () {
    if (this.value.match(/\.(pdf|docx)$/)) {
        document.getElementById("uploadFile").value = this.value;
    } else {
        this.value = "";
        alert("Must be a PDF or DOCX.");
    }
};

如果所选文件不是特定类型，则使用 JavaScript 或 JQuery 清除文件上传字段

Using JavaScript or JQuery to clear a file upload field if the file selected is not a certain type

html

javascript

validation

jquery

file-upload