[javascript] 如何讓jQuery限制上傳文件類型?



Answers

沒有插件只需要這個任務。 從一些其他腳本將它們拼湊在一起:

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

這裡的技巧是將上傳按鈕設置為禁用,除非選擇了有效的文件類型。

Question

我想讓jQuery將文件上傳字段限制為只有jpg / jpeg,png和gif。 我正在做PHP後端檢查。 我正在通過JavaScript函數運行我的提交按鈕,所以我只需要知道如何在提交或提醒之前檢查文件類型。




<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>



此代碼工作正常,但唯一的問題是,如果文件格式不是指定的選項,它會顯示一條警告消息,但它顯示文件名,而應該忽略它。

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});



function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }



不想檢查MIME而不是檢查用戶是否在說謊? 如果是這樣,那麼它不到一行:

<input type="file" id="userfile" accept="image/*|video/*" required />



對於我的情況,我使用了以下代碼:

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }





Related