HTML：如何限制file upload只能是图片？
用HTML，我该如何限制可以上传什么样的文件types？
为了方便用户体验，我想将file upload限制为图片（jpeg，gif，png）。
<form method="post" action="..." enctype="multipart/form-data"> <label for="image">Photo</label> <input name="image" type="file" /> </form> HTML5表示<input type="file" accept="image/*"> 。 当然，永远不要相信客户端validation：总是再次检查服务器端…
HTML5文件input具有接受属性和多个属性。 通过使用多个属性，您可以在一个实例中上传多个图像。
<input type="file" multiple accept='image/*'>
您也可以限制多个MIMEtypes。
<input type="file" multiple accept='image/*|audio/*|video/*' >
另一种使用文件对象检查MIMEtypes的方法。
文件对象给你的名字，大小和types。
var files=e.target.files; var mimeType=files[0].type; // You can get the mime type
您还可以通过上面的代码限制用户上传一些文件types。
编辑
如果事情是他们应该的，你可以通过“接受”属性来做到这一点。
http://www.webmasterworld.com/forum21/6310.htm
然而，浏览器几乎无视这一点，所以这是无关紧要的。 简短的回答是，我不认为有一种方法可以在HTML中完成。 你必须检查它的服务器端。
以下较旧的post有一些信息，可以帮助您的替代品。
文件input“接受”属性 – 是否有用？
这里是图片上传的HTML。 默认情况下，它只会在浏览窗口中显示图像文件，因为我们把accept="image/*" 。 但是我们仍然可以从下拉菜单中改变它，它会显示所有的文件。 所以Javascript部分validation所选文件是否是实际的图像。
<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>
在这个变化事件中，我们首先检查图像的大小。 在第二个条件，我们检查它是否是一个图像文件。
如果它不是图像文件，则this.files[0].type.indexOf("image")将为-1 。
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]); };
您只能在服务器端安全地执行此操作。 使用“接受”属性是好的，但也必须在服务器端进行validation，以免用户能够不受限制地跟随脚本。
我build议你：放弃任何非图像文件，警告用户，并重新显示表单。
最终，在浏览器窗口中显示的filter由浏览器设置。 您可以在“接受”属性中指定所需的所有filter，但不能保证用户的浏览器将遵守该filter。
最好的办法是在服务器的后端进行某种过滤。
<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>
现在在html部分
<input type="file" onchange="chng()">
此代码将检查上传的文件是否是jpg文件，并限制其他types的上传
签出名为Uploadify的项目。 http://www.uploadify.com/
这是一个基于Flash + jQuery的file upload器。 这使用Flash的文件select对话框，它使您能够过滤文件types，同时select多个文件等。
