HTML: Làm thế nào để giới hạn tải lên tệp chỉ là hình ảnh?

Với HTML, làm cách nào để giới hạn loại tệp có thể được tải lên?

Để dễ dàng trải nghiệm người dùng, tôi muốn giới hạn tải lên tệp chỉ là hình ảnh (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

HTML5 nói <input type="file" accept="image/*">. Tất nhiên, không bao giờ tin tưởng xác thực phía máy khách: Luôn kiểm tra lại ở phía máy chủ ...

Đầu vào tệp HTML5 có thuộc tính chấp nhận và nhiều thuộc tính. Bằng cách sử dụng nhiều thuộc tính, bạn có thể tải lên nhiều hình ảnh trong một ví dụ.

<input type="file" multiple accept='image/*'>

Bạn cũng có thể giới hạn nhiều loại mime.

<input type="file" multiple accept='image/*|audio/*|video/*' >

và một cách khác để kiểm tra loại mime bằng cách sử dụng đối tượng tệp.

đối tượng tập tin cung cấp cho bạn tên, kích thước và loại.

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

Bạn cũng có thể hạn chế người dùng đối với một số loại tệp để tải lên theo mã trên.

Đã chỉnh sửa

Nếu mọi thứ đúng như họ NÊN, bạn có thể thực hiện việc này thông qua thuộc tính "Chấp nhận".

http://www.webmasterworld.com/forum21/6310.htm

Tuy nhiên, các trình duyệt khá nhiều bỏ qua điều này, vì vậy điều này là không liên quan. Câu trả lời ngắn gọn là, tôi không nghĩ có một cách để làm điều đó trong HTML. Thay vào đó, bạn phải kiểm tra phía máy chủ.

Bài viết cũ hơn sau đây có một số thông tin có thể giúp bạn với các lựa chọn thay thế.

Nhập thuộc tính 'chấp nhận' - nó có hữu ích không?

Đây là HTML để tải lên hình ảnh. Theo mặc định, nó sẽ chỉ hiển thị các tệp hình ảnh trong cửa sổ duyệt vì chúng tôi đã đặt accept="image/*". Nhưng chúng ta vẫn có thể thay đổi nó từ danh sách thả xuống và nó sẽ hiển thị tất cả các tệp. Vì vậy, phần Javascript xác thực xem tệp đã chọn có phải là hình ảnh thực tế hay không.

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

Ở đây về sự kiện thay đổi, trước tiên chúng tôi kiểm tra kích thước của hình ảnh. Và trong ifđiều kiện thứ hai, chúng tôi kiểm tra xem đó có phải là tệp hình ảnh hay không.

this.files[0].type.indexOf("image")sẽ là -1nếu nó không phải là một tập tin hình ảnh.

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Bạn chỉ có thể làm điều này một cách an toàn ở phía máy chủ. Sử dụng thuộc tính "chấp nhận" là tốt, nhưng cũng phải được xác thực ở phía máy chủ vì sợ người dùng có thể xác nhận tập lệnh của bạn mà không bị giới hạn.

Tôi đề nghị bạn: loại bỏ bất kỳ tệp không phải hình ảnh nào, cảnh báo người dùng và hiển thị lại biểu mẫu.

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

Bây giờ trong phần html

<input type="file" onchange="chng()">

mã này sẽ kiểm tra xem tệp đã tải lên có phải là tệp jpg hay không và hạn chế tải lên các loại khác

Cuối cùng, bộ lọc được hiển thị trong cửa sổ Duyệt được trình duyệt đặt. Bạn có thể chỉ định tất cả các bộ lọc bạn muốn trong thuộc tính Chấp nhận, nhưng bạn không có gì đảm bảo rằng trình duyệt của người dùng của bạn sẽ tuân thủ nó.

Đặt cược tốt nhất của bạn là thực hiện một số loại lọc ở mặt sau trên máy chủ.

Kiểm tra một dự án gọi là Uploadify. http://www.uploadify.com/

Đó là trình tải lên tệp dựa trên Flash + jQuery. Thao tác này sử dụng hộp thoại chọn tệp của Flash, cung cấp cho bạn khả năng lọc các loại tệp, chọn nhiều tệp cùng một lúc, v.v.