默认的input表单中的样式是无法改变的
1、自定义图片上传的样式
1 <div class="form-group"> 2 <label for="site_logo" class="col-sm-2 control-label">网站图标</label> 3 <div class="col-sm-6"> 4 <input id="site_logo" name="site_logo" type="hidden" value=""> 5 <label class="form-image"> 6 <input id="logo" type="file"> 7 <img src="/static/assets/img/logo.png"> 8 <i class="mask fa fa-upload"></i> 9 </label> 10 </div> 11 </div>
设置#logo的display = none,img覆盖到input的位置上
2、异步文件上传
1 $(function($){ 2 $('#logo').on('change',function(){ 3 var files = $(this).prop('files'); 4 if(!files.length) return ; 5 var file = files[0]; 6 // FormData类型其实是在XMLHttpRequest 2级定义的， 7 // 它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 8 var data = new FormData(); 9 //通过append添加,参数1是键，参数2是值 10 data.append('avatar',file); 11 var xhr = new XMLHttpRequest(); 12 xhr.open('post','/admin/api/setting-upload.php'); 13 xhr.send(data); 14 xhr.onload = function(){ 15 $('#logo + img').attr('src',this.responseText); 16 $('#site_logo').attr('value',this.responseText); 17 } 18 19 }) 20 })
ajax返回图片存储的url路径，并设置到#logo的src上，为了之后表单的提交能够获取到图片的url，设置一个Input,type为hidden(不会显示)，设置它的value为图片的url 。
3、图片欲加载
FileReader方法
document.getElementById('logo').onchange = function(){
//1 创建文件读取对象
var reads= new FileReader();
//文件存储在file表单元素的 files属性中，它是一个数组，第0个表示当前上传的文件，获取上传文件的 name
f=document.getElementById('file').files[0];
//没有返回值，但是读取完毕后，将读取结果存储在对象的 result 中
reads.readAsDataURL(f);
reads.onload=function (e) {
document.getElementById('show').src=this.result;
};
}
createObjectURL方法
document.getElementById('logo').onchange = function() {
//console.log(this.files[0]);//这里可以获取上传文件的name
var newsrc=getObjectURL(this.files[0]);
document.getElementById('show').src=newsrc;
}
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
以上是两种方法，按照前辈们的说法，creatObjectURL可以有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。
这个新的URL 对象表示指定的 File 对象或 Blob 对象。
URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似：
区别
通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
执行时机
createObjectURL是同步执行（立即的）
FileReader.readAsDataURL是异步执行（过一段时间）
内存使用
createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
兼容性方面两个属性都兼容ie10以上的浏览器。
优劣对比：
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL
3、自定义radio样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .radio{ display: none; } .radio + i { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #cacaca; vertical-align: top; border: 1px solid #ccc; } .radio + i::after{ content: ' '; display: inline-block; width: 10px; height: 10px; margin: 5px; border-radius: 50%; background-color: #fff; } .radio:checked + i{ background-color: pink; } .radio:checked + i::after{ content: ' '; display: inline-block; width: 10px; height: 10px; margin: 5px; border-radius: 50%; background-color: #fff; } </style> </head> <body> <label> <input type="radio" name="sex" class="radio"> <i></i> 男 </label> <label> <input type="radio" name="sex" class="radio"> <i></i> 女 </label> </body> </html>