自定义图片上传和radio样式

默认的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>