input file相关知识简例
在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传、批量上传、删除照片、增加照片、读取图片、对上传的图片或文件的判断,比如限制图片的张数、限制图片的格式、大小等。
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但特别low、浏览的字样又不能换,但难不倒强迫症患者...看一些其他网站有的将<input type="file" />隐藏,用点击其他的标签(图片等)来时实现选择文件上传功能,也有的将其设为透明,这里推荐后者,详情请参考下面代码。
此为本人写的demo,更人性化的效果实现,供分享,不足之处望提议,将不胜感激
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .kuang{ 11 display: inline-block; 12 vertical-align: middle; 13 box-shadow: inset 0px 1px 20px 5px #ddd; 14 text-align: left; 15 margin-right: 20px; 16 margin-bottom: 20px; 17 width: 165px; 18 height: 165px; 19 } 20 .addhao{ 21 width: 165px; 22 height: 165px; 23 background: url(../img/add_photo_plus.png); 24 } 25 .on{ 26 display: inline-block; 27 text-align: left; 28 margin-right: 20px; 29 margin-bottom: 20px; 30 width: 165px; 31 height: 165px; 32 display: none; 33 position: relative; 34 overflow: hidden; 35 line-height: 200px; 36 } 37 .xian{ 38 width: 165px; 39 height: 165px; 40 position: absolute; 41 background-image: linear-gradient( 42 0deg, 43 rgba(0,0,0,0.7) 50%, 44 transparent 50% 45 ); 46 background-size: 165px 4px; 47 display: none; 48 z-index: 2; 49 } 50