Как разрешить <input type = "file"> принимать только файлы изображений?

Мне нужно загрузить только файл изображения через <input type="file">.

Прямо сейчас, он принимает все типы файлов. Но я хочу ограничить его только конкретными расширениями файлов изображений, которые включают в себя .jpg, .gif и т.д.

Как я могу достичь этой функциональности?

Ответы

Ответ 1

Используйте атрибут accept входного тега. Поэтому, чтобы принимать только PNG, JPEG и GIF, вы можете использовать следующий код:

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

Ответ 2

Используя это:

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

работает как в FF, так и в Chrome.

Ответ 4

Это может быть достигнуто

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

Но это не очень хорошо. вам нужно закодировать на стороне сервера, чтобы проверить файл на изображении или нет.

Проверьте, является ли файл изображения фактическим или поддельным изображением

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;
    }
}

Подробнее см. здесь

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

Ответ 5

Шаги:
 1. Добавьте атрибут accept в тег ввода
 2. Подтвердить с помощью javascript
 3. Добавьте подтверждение на стороне сервера, чтобы проверить, действительно ли контент является ожидаемым типом файла

Для HTML и 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>

Объяснение:

  • Атрибут accept фильтрует файлы, которые будут отображаться в всплывающее окно выбора файла. Однако это не проверка. Это всего лишь подскажите браузеру. Пользователь может изменить параметры в выскакивать.
  • Javascript проверяет только расширение файла, но не может действительно проверьте, является ли файл выбора фактическим jpg или png.
  • Итак, вам нужно написать для проверки содержимого файла на стороне сервера.

Ответ 7

Используя type = "file" и accept = "image/*" (или нужный вам формат), разрешите пользователю выбрать файл с определенным форматом. Но вы должны еще раз проверить это на стороне клиента, потому что пользователь может выбрать другой тип файлов. Это работает для меня.

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

А потом, в вашем сценарии JavaScript

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
    }
  }

Ответ 8

Вы не можете добиться этого, используя стандартный входной контроль. Общие методы включают проверку этого на стороне сервера или использование некоторого управления загрузкой Flash, которое позволяет больше настроек. Также не забывайте, что проверка расширения файла является необходимым, но не достаточным условием того, что файл является образом. Там ничего не мешает пользователю переименовать исполняемый файл на .jpg, например.

Ответ 9

<script type="text/javascript">
function load_image(id,ext)
{
   if(validateExtension(ext) == false)
   {
      alert("Upload only JPEG or JPG format ");
      document.getElementById("imagePreview").innerHTML = "";
      document.getElementById("file").focus();
      return;
   }
}

function validateExtension(v)
{
      var allowedExtensions = new Array("jpg","JPG","jpeg","JPEG");
      for(var ct=0;ct<allowedExtensions.length;ct++)
      {
          sample = v.lastIndexOf(allowedExtensions[ct]);
          if(sample != -1){return true;}
      }
      return false;
}
</script>


<div id="imagePreview"></div>
   <br><input type="file" id="recentphoto" class="custom-file-input" name="new_image"   accept="image/jpg, image/JPG,image/JPEG, image/jpeg" required="required"  onChange="load_image(this.id,this.value)" />
   <br />
   <br />
 </div>