javascript jquery抓取網頁內容 - 如何讓jQuery限制上傳文件類型?




7 Answers

您可以獲得與任何其他字段相同的文件字段的值。 但是,你不能改變它。

所以為了表面檢查一個文件是否有正確的擴展名,你可以這樣做:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}
html set

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




你可以使用jQuery的驗證插件: http://docs.jquery.com/Plugins/Validation : http://docs.jquery.com/Plugins/Validation

它恰好有一個accept()規則,它完全符合你的需求: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension : http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

請注意,控製文件擴展名不是防彈的,因為它與文件的MIME類型無關。 所以你可以有一個.png這是一個word文檔和一個.doc,這是一個完全有效的PNG圖像。 所以不要忘記在服務器端做更多的控制;)







我嘗試編寫工作代碼示例,我測試它,並且一切正常。

兔子是代碼:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

使用Javascript:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}



這個例子只允許上傳PNG圖像。

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });



如果您正在處理多個(html 5)文件上傳,我採取了最高建議的評論並對其進行了一些修改:

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }



這裡是一個簡單的JavaScript驗證代碼,驗證後它將清理輸入文件。

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}



Related