Làm cách nào để cho phép <input type = tập tin trên mạng >> chỉ chấp nhận các tệp hình ảnh?

376

Tôi chỉ cần tải lên tập tin hình ảnh thông qua <input type="file">thẻ.

Ngay bây giờ, nó chấp nhận tất cả các loại tập tin. Nhưng, tôi muốn giới hạn nó chỉ các phần mở rộng tệp hình ảnh cụ thể bao gồm .jpg, .gifv.v.

Làm thế nào tôi có thể đạt được chức năng này?

html

— kbvishnu
nguồn

Công nghệ sử dụng phía máy chủ là gì?

— Erdal G.

1

kbvishnu, có lẽ bạn có thể xem xét lại câu trả lời bạn đã chấp nhận từ lâu. Bạn không phải chấp nhận câu trả lời khác. Tôi chỉ đề xuất, dựa trên số lượng cờ chúng tôi đã nhận được về câu trả lời và mức độ bình chọn so với các câu trả lời khác, có lẽ ít nhất bạn nên xem xét việc không chấp nhận nó.

— Aaron Hall

943

Sử dụng thuộc tính chấp nhận của thẻ đầu vào. Vì vậy, để chỉ chấp nhận PNG, JPEG và GIF, bạn có thể sử dụng mã sau đây:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

Mở rộng đoạn trích

Hoặc đơn giản:

<input type="file" name="myImage" accept="image/*" />

Mở rộng đoạn trích

Lưu ý rằng điều này chỉ cung cấp một gợi ý cho trình duyệt về loại tệp nào sẽ hiển thị cho người dùng, nhưng điều này có thể dễ dàng phá vỡ, vì vậy bạn cũng nên luôn xác thực tệp đã tải lên trên máy chủ.

Nó nên hoạt động trong IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, nhưng hỗ trợ rất sơ sài trên điện thoại di động (kể từ năm 2015) và theo một số báo cáo, điều này thực sự có thể ngăn một số trình duyệt di động tải lên mọi thứ, vì vậy hãy chắc chắn để kiểm tra tốt nền tảng mục tiêu của bạn.

Để được hỗ trợ trình duyệt chi tiết, hãy xem http://caniuse.com/#feat=input-file-accept

— madcap cười
nguồn

@madcap accept="file/csv, file/xls"có hợp lệ không ??

— KNU

19

Bạn có chắc image/x-pngkhông? Theo danh sách này, nó chỉ là image/png. iana.org/assignments/media-types/media-types.xhtml

— Micros

6

Đó nên là câu trả lời được lựa chọn! Nó chỉ thiếu một lưu ý nói rằng bạn vẫn cần kiểm tra phía máy chủ (vì không hỗ trợ trình duyệt, nhưng cũng để bảo mật)

— Erdal G.

1

Có lẽ nó hoạt động khi câu trả lời là câu trả lời, nhưng chỉ cần thử nó và không làm việc với FF. Tôi chỉ cần thêm accept = ". Png, .jpg, .jpeg" Eg: jsfiddle.net/DiegoTc/qjsv8ay9/4

— Diego

1

Đừng hoàn toàn dựa vào nó. Nó có thể dễ dàng chấp nhận các tập tin khác quá. Bạn chỉ cần thay đổi loại tệp được phép trong cửa sổ tệp đang mở.

163

Sử dụng cái này:

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

hoạt động trong cả FF và Chrome.

— Tyilo
nguồn

14

Thuộc tính chấp nhận không phải là một công cụ xác thực, tất cả các tải lên phải được xác thực trên máy chủ, luôn luôn ...

— TlonXP

1

vẫn không được hỗ trợ trong trình duyệt Android gốc, nhưng hoạt động tốt trên các trình duyệt khác, tôi đoán caniuse.com/#feat=input-file-accept

— mcy 14/03/2016

Tôi thích giải pháp này vì trong lời nhắc tập tin, kiểu thả xuống hiển thị "Tệp hình ảnh".

— hardsetting

Hãy cẩn thận với điều này, vì nó cho phép các SVG, điều mà bạn có thể không muốn.

— stephenmurdoch

Điều này sẽ cho phép các tệp hình ảnh tối đa .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Vì vậy, tốt hơn là đề cập đến loại cụ thể.

— Thamarai T

76

Sử dụng nó như thế này

<input type="file" accept=".png, .jpg, .jpeg" />

Nó làm việc cho tôi

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— Ơ Agital Mohit
nguồn

Điều này không hoạt động cho iOS 12. Người dùng vẫn có thể chọn video trong thiết bị.

— dùng3160227

28

Các bước:
1. Thêm thuộc tính chấp nhận vào thẻ đầu vào
2. Xác thực bằng javascript
3. Thêm xác thực phía máy chủ để xác minh xem nội dung có thực sự là loại tệp dự kiến không

Đối với HTML và javascript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Giải trình:

Thuộc tính accept lọc các tệp sẽ được hiển thị trong cửa sổ bật lên của trình chọn tệp. Tuy nhiên, nó không phải là một xác nhận. Nó chỉ là một gợi ý cho trình duyệt. Người dùng vẫn có thể thay đổi các tùy chọn trong cửa sổ bật lên.
Các javascript chỉ xác nhận cho phần mở rộng tập tin, nhưng thực sự không thể xác minh nếu tập tin được chọn là một jpg hoặc png thực tế.
Vì vậy, bạn phải viết để xác nhận nội dung tập tin ở phía máy chủ.

— Surya Kameswara Rao Ravi
nguồn

1

câu trả lời đầy đủ nhất

— paranoidhominid

27

Điều này có thể đạt được bởi

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

Nhưng đây không phải là một cách tốt. bạn phải mã bên phía máy chủ để kiểm tra tập tin một hình ảnh hay không.

Kiểm tra xem tập tin hình ảnh là hình ảnh thật hay hình ảnh giả

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

Để tham khảo thêm, xem tại đây

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— Ashok Devatwal
nguồn

5

bạn có thể sử dụng acceptthuộc tính để <input type="file">đọc tài liệu này http://www.w3schools.com/tags/att_input_accept.asp

— yussan
nguồn

3

Sử dụng type = "file" và accept = "image / *" (hoặc định dạng bạn muốn), cho phép người dùng chọn một tệp có định dạng cụ thể. Nhưng bạn phải kiểm tra lại nó ở phía máy khách, vì người dùng có thể chọn loại tệp khác. Điều này làm việc cho tôi.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

Và sau đó, trong tập lệnh javascript của bạn

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— Mati Cassanelli
nguồn

Đây là câu trả lời tốt nhất, vì nó sẽ kiểm tra xem tệp có thực sự là hình ảnh hay không mà không yêu cầu nhà phát triển chỉ định tất cả các tiện ích mở rộng khác nhau mà họ muốn cho phép

— Adam Marshall

Tôi hiểu ý của bạn Đây có phải là một cú pháp JS hợp lệ : const file: File = imageInput.files[0];? Ngoài ra, việc gán id cho đầu vào không được thực hiện theo cách thông thường.

— Ivan P.

Trong thực tế, không phải là JS, nó là bản thảo. Mã khối đã được sao chép từ một dự án Angular. Nếu bạn muốn sử dụng nó trong tệp javascript, bạn phải bỏ định nghĩa loại (: Tệp)

— Mati Cassanelli

0

Nếu bạn muốn tải lên nhiều hình ảnh cùng một lúc, bạn có thể thêm multiplethuộc tính vào đầu vào.

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

Mở rộng đoạn trích

— Jerry
nguồn