input file美化
2017-01-05 22:56
246 查看
在我们开发中经常有input flie的使用但是input flie 又丑又烂每个浏览器的样式又不同, 我们可以使用css进行美化废话不多说上代码
DOM结构:
CSS样式1:
样式2:
修改后如下:
样式二:
上面美化,把默认显示的文件名也给隐藏掉了,那么如何显示文件名称呢?没关系,我们可以用jquery来获取文件的文件名。
我们可以写个change事件
属性值有以下几个比较常用:
accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。
multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。
只能选择png和gif图片
多文件上传
请看博客:css input[type=file] 样式美化,input上传按钮美化 http://www.haorooms.com/post/css_input_uploadmh
在说到ajax上传文件,之前的文章也有说过(详见:JS学习32:html5拖拽图片批量ajax无刷新进度上传)。ajax上传的时候,需要获得input:file选择的文件(可能为多个文件),获取其文件列表为:
获得的文件列表,然后遍历插入到表单数据当中。即:
获得表单数据之后,就可以用ajax的POST上传。
上传到服务器之后,获取到文件列表为:
DOM结构:
<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <a href="javascript:;" class="file">选择文件 <input type="file" name="" id=""> </a>
CSS样式1:
/*a upload */ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }
样式2:
.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; }
修改后如下:
样式二:
美化后显示文件名
上面美化,把默认显示的文件名也给隐藏掉了,那么如何显示文件名称呢?没关系,我们可以用jquery来获取文件的文件名。我们可以写个change事件
$(".a-upload").on("change","input[type='file']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip").html("").hide(); var arr=filePath.split('\\'); var fileName=arr[arr.length-1]; $(".showFileName").html(fileName); }else{ $(".showFileName").html(""); $(".fileerrorTip").html("您未上传文件,或者您上传文件类型有误!").show(); return false } })
HTML5的 input:file上传类型控制
一、input:file属性
属性值有以下几个比较常用:accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。
multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。
1、accept
只能选择png和gif图片<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />
2、multiple
多文件上传<input id="fileId2" type="file" multiple="multiple" name="file" />
3、常用MIME类型
后缀名 MIME名称 *.3gpp audio/3gpp, video/3gpp *.ac3 audio/ac3 *.asf allpication/vnd.ms-asf *.au audio/basic *.css text/css *.csv text/csv *.doc application/msword *.dot application/msword *.dtd application/xml-dtd *.dwg image/vnd.dwg *.dxf image/vnd.dxf *.gif image/gif *.htm text/html *.html text/html *.jp2 image/jp2 *.jpe image/jpeg *.jpeg image/jpeg *.jpg image/jpeg *.js text/javascript, application/javascript *.json application/json *.mp2 audio/mpeg, video/mpeg *.mp3 audio/mpeg *.mp4 audio/mp4, video/mp4 *.mpeg video/mpeg *.mpg video/mpeg *.mpp application/vnd.ms-project *.ogg application/ogg, audio/ogg *.pdf application/pdf *.png image/png *.pot application/vnd.ms-powerpoint *.pps application/vnd.ms-powerpoint *.ppt application/vnd.ms-powerpoint *.rtf application/rtf, text/rtf *.svf image/vnd.svf *.tif image/tiff *.tiff image/tiff *.txt text/plain *.wdb application/vnd.ms-works *.wps application/vnd.ms-works *.xhtml application/xhtml+xml *.xlc application/vnd.ms-excel *.xlm application/vnd.ms-excel *.xls application/vnd.ms-excel *.xlt application/vnd.ms-excel *.xlw application/vnd.ms-excel *.xml text/xml, application/xml *.zip aplication/zip *.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
二、样式美化
请看博客:css input[type=file] 样式美化,input上传按钮美化 http://www.haorooms.com/post/css_input_uploadmh
三、AJAX上传文件
在说到ajax上传文件,之前的文章也有说过(详见:JS学习32:html5拖拽图片批量ajax无刷新进度上传)。ajax上传的时候,需要获得input:file选择的文件(可能为多个文件),获取其文件列表为:// input标签的files属性 document.querySelector("#fileId").files // 返回的是一个文件列表数组
获得的文件列表,然后遍历插入到表单数据当中。即:
// 获得上传文件DOM对象 var oFiles = document.querySelector("#fileId"); // 实例化一个表单数据对象 var formData = new FormData(); // 遍历图片文件列表,插入到表单数据中 for (var i = 0, file; file = oFiles[i]; i++) { // 文件名称,文件对象 formData.append(file.name, file); }
获得表单数据之后,就可以用ajax的POST上传。
// 实例化一个AJAX对象 var xhr = new XMLHttpRequest(); xhr.onload = function() { alert("上传成功!"); } xhr.open("POST", "upload.php", true); // 发送表单数据 xhr.send(formData);
上传到服务器之后,获取到文件列表为:
Array ( [jpg_jpg] => Array ( [name] => jpg.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpA595.tmp [error] => 0 [size] => 133363 ) [png_png] => Array ( [name] => png.png [type] => image/png [tmp_name] => D:\xampp\tmp\phpA5A6.tmp [error] => 0 [size] => 1214628 ) )
相关文章推荐
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- Basilisk:一个有着经典的外观和扩展的 Firefox 复刻
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 用户自定义多选框checkbox
- 后台管理页面布局(左侧导航长度根据右侧内容无限延伸)
- 回顾 Firefox 历史
- 小白观察:微软释放出其基于 Chromium 的 Edge 浏览器
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器