jQuery 示例:在文件扩展名不允许的情况下重置输入文件元素

jQuery Example: Reseting an input file element in case of non-allowed file-extensions

本文关键字：文件 情况下 元素 输入 不允许 示例 扩展名 jQuery      更新时间：2023-09-26

如果有人试图上传一个文件扩展名不允许的文件，这个输入文件元素应该被"重置"。

那就是输入文件元素

<input type="file" id="image1">

这些是相应的jQuery语句（文档已准备就绪），我得到"TypeError：myElement.clone不是一个函数"（当我在这里尝试这个解决方案时：使用jQuery清除）

$(document).ready(function() {
    $('#image1').change(function(event) {
        checkExtensions(this.files[0].name, $(this).get());
    });
    function checkExtensions (fileName, element) {
        var myElement = element;
        var allowedExtensions = new Array ('pdf','gif','jpg','png');
        var currentExtension = fileName.split('.').pop();
        if ($.inArray (currentExtension, allowedExtensions) > -1) {
            // everythins is OK, further instructions take place
        }   else {
            // reset the file input element
            myElement.replaceWith( myElement = myElement.clone( true ) );
        }
    }
});

你正在将本机 DOM 元素传递给你的函数，而不是包含该元素的 jQuery 对象。本机 DOM 元素没有函数clone()（或replaceWith）。试试这个：

$('#image1').change(function(event) {
    checkExtensions(this.files[0].name, $(this)); // note, I removed .get()
});
function checkExtensions (fileName, $element) {
    var allowedExtensions = new Array ('pdf','gif','jpg','png');
    var currentExtension = fileName.split('.').pop();
    if ($.inArray (currentExtension, allowedExtensions) > -1) {
        // everything is OK, further instructions take place
    }   else {
        // reset the file input element        
        $element.replaceWith($element.clone(true).val(''));
    }
}

示例小提琴

相关文章：