<input type="file">태그를 통해 이미지 파일 만 업로드해야합니다 .
현재 모든 파일 형식을 허용합니다. 그러나 나는 등 특정 이미지 파일 확장자에 제한하려면 .jpg, .gif등
이 기능을 어떻게 달성 할 수 있습니까?
답변
입력 태그 의 accept 속성을 사용하십시오 . 따라서 PNG, JPEG 및 GIF 만 허용하려면 다음 코드를 사용할 수 있습니다.
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />또는 간단히 :
<input type="file" name="myImage" accept="image/*" />이는 사용자에게 표시 할 파일 형식에 대한 힌트 만 브라우저에 제공하지만 쉽게 우회 할 수 있으므로 업로드 된 파일도 항상 서버에서 확인해야합니다.
IE 10 이상, Chrome, Firefox, Safari 6 이상, Opera 15 이상에서 작동해야하지만 모바일에 대한 지원은 매우 스케치 적이며 (2015 년 기준) 일부 보고서에 따르면 실제로 일부 모바일 브라우저가 아무것도 업로드하지 못하게 할 수 있습니다. 대상 플랫폼을 잘 테스트하십시오.
자세한 브라우저 지원은 http://caniuse.com/#feat=input-file-accept를 참조하십시오 .
답변
이것을 사용하여 :
<input type="file" accept="image/*">FF와 Chrome 모두에서 작동합니다.
답변
이렇게 사용하세요
<input type="file" accept=".png, .jpg, .jpeg" />그것은 나를 위해 일했다
답변
단계 :
1. 입력 태그에 accept 속성 추가
2. javascript로 유효성 검사
3. 서버 측 유효성 검사를 추가하여 내용이 실제로 파일 형식인지 확인합니다.
HTML 및 자바 스크립트의 경우 :
<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 속성은 파일 선택기 팝업에 표시 될 파일을 필터링합니다. 그러나 유효성 검사는 아닙니다. 브라우저에 대한 힌트 일뿐입니다. 사용자는 여전히 팝업에서 옵션을 변경할 수 있습니다.
- 자바 스크립트는 파일 확장자에 대해서만 유효성을 검사하지만 선택 파일이 실제 jpg 또는 png인지 실제로 확인할 수는 없습니다.
- 따라서 서버 측에서 파일 내용 유효성 검사를 작성해야합니다.
답변
이것은 달성 할 수 있습니다
<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
답변
이 문서 accept를 <input type="file">읽기 위해 속성을 사용할 수 있습니다 http://www.w3schools.com/tags/att_input_accept.asp
답변
type = “file”및 accept = “image / *”(또는 원하는 형식)을 사용하여 사용자는 특정 형식의 파일을 선택할 수 있습니다. 그러나 사용자는 다른 유형의 파일을 선택할 수 있으므로 클라이언트 측에서 다시 확인해야합니다. 이것은 나를 위해 작동합니다.
<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />그런 다음 자바 스크립트에서
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
}
}