如果所选文件不是某种类型，则使用 JavaScript 或 JQuery 清除文件上传字段[重复]

Posted 2023-03-11

【中文标题】如果所选文件不是某种类型，则使用 JavaScript 或 JQuery 清除文件上传字段[重复]

【英文标题】：Using JavaScript or JQuery to clear a file upload field if the file selected is not a certain type [duplicate]

【发布时间】：2015-08-31 09:06:35

【问题描述】：

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

<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 扩展名。如果所选文件与该扩展名不匹配，有没有办法清除文件上传字段？并且也许添加一个警报，让该人知道他们的文件已被清除或格式不正确？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/html/Element/… 对于现代浏览器，只需要 IE 的 js 版本

阅读：***.com/questions/4328947/…

哇，我是不是觉得自己很笨……完全是脑残。非常感谢！

顺便说一句，我认为document.getElementById("uploadFile").value = this.value; 不会起作用。

@TRose 嘿，我有你的解决方案

【参考方案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.");
    
;

【讨论】：

脑洞大开，忘记探索accept 属性。我的问题现在没有实际意义，尽管这也非常有帮助。谢谢。