javascript - jQuery 示例 : Reseting an input file element in case of non-allowed file-extensions

Question

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

这是输入文件元素

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

这些是相应的 jQuery 语句(文档已准备好)，我得到“TypeError:myElement.clone 不是一个函数”(当我在这里尝试这个解决方案时:Clearing <input type='file' /> using 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 ) );
        }
    }
});

Answer 1

您正在将 native 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(''));
    }
}

Example fiddle