html设置文件上传类型,如何设置在选择文件的时候只能选图片
选择图片:<input type="file" name="file"/><input type="submit" value="上传"/>
</form> 展开
可以设置一下html中的accept属性以实现上传文件类型的筛选,accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
工具原料:编辑器、浏览器
1、设置一个文件上传选项,删选一下只能上传图片或者详细的限制只能上传图片的某些格式,代码如下:
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 input 标签的 accept 属性。</p>
<p><strong>注释:</strong>鉴于安全考虑,该例不允许您上传文件。</p>
</body>
</html>
2、运行的结果是只能上传图片不能上传其他的文件,在弹出的上传选择对话框中也会值显示图片,如下图:
通过js能实现,我想要百度文库上传的那种效果,只能选择允许的.
点开百度知道里的插入图片,弹出一个层,就是让你上传图片的页面,然后看它源代码,我刚才看了看,是js做的,里面有判断,你可以复制下来用。它的部分代码:
function checkType(A){var B=/\.jpg$|\.jpeg$|\.gif$|\.bmp$|\.png$/i;
通过js能实现,我想要百度文库上传的那种效果,只能选择允许的.
那个不是js做的,是flash。
可以直接设置input标签的accept属性来限制上传文件的类型
<input type="file" accept="application/msword" ><br><br>accept属性列表<br>12
1.accept=”application/msexcel”
2.accept=”application/msword”
3.accept=”application/pdf”
4.accept=”application/poscript”
5.accept=”application/rtf”
6.accept=”application/x-zip-compressed”
7.accept=”audio/basic”
8.accept=”audio/x-aiff”
9.accept=”audio/x-mpeg”
10.accept=”audio/x-pn/realaudio”
11.accept=”audio/x-waw”
12.accept=”image/gif”
13.accept=”image/jpeg”
14.accept=”image/tiff”
15.accept=”image/x-ms-bmp”
16.accept=”image/x-photo-cd”
17.accept=”image/x-png”
18.accept=”image/x-portablebitmap”
19.accept=”image/x-portable-greymap”
20.accept=”image/x-portable-pixmap”
21.accept=”image/x-rgb”
22.accept=”text/html”
23.accept=”text/plain”
24.accept=”video/quicktime”
25.accept=”video/x-mpeg2”
26.accept=”video/x-msvideo”
如果限制上传的文件为图片格式,则可以直接写成:accept = ‘image/*’;