如何让<input type =“file”>只接受图像文件
我需要上传一个文件，这是一个图像。 我正在使用<input type="file"> 。
但是，这接受所有types的文件。 我只需要扩展名为.jpg ， .gif等的文件
我怎样才能使上传对话框只允许select图像文件？
使用input标签的accept属性。 所以要只接受PNG，JPEG和GIF，你可以使用下面的代码：
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
使用这个：
<input type="file" accept="image/*">
适用于FF和Chrome。
像这样使用它
<input type="file" accept=".png, .jpg, .jpeg" />
它为我工作
这可以通过
<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
您可以使用<input type="file"> accept属性阅读本文档http://www.w3schools.com/tags/att_input_accept.asp
脚步：
1.将接受属性添加到input标签
2.validation与JavaScript
3.添加服务器端validation，以validation内容是否确实是预期的文件types
对于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属性过滤将在文件select器popup窗口中显示的文件。 但是，这不是一个validation。 这只是浏览器的一个暗示。 用户仍然可以更改popup窗口中的选项。
- JavaScript只validation文件扩展名，但不能真正validationselect文件是否是实际的JPG或PNG。
- 所以你必须写在服务器端的文件内容validation。
使用标准input控件无法达到此目的。 常见的技术包括在服务器端进行validation，或者使用一些允许更多定制的Flash上传控件。 另外请注意，validation文件扩展名是一个必要但不是充分的条件，即文件是图像。 例如，没有什么能够阻止用户将可执行文件重命名为.jpg 。
<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>
