图片上传总结

好了，总结篇终于开工了，这次来说说关于上传的一些琐碎事情。

file input的美化

file input 好用是好用但是论起颜值来说差得不是一点半点，怎么能让这玩意儿拉低我们写好的页面颜值呢(ง •̀_•́)ง，来整整容吧，其实这个东西实现起来也很简单的
首先我们把这个上传的input用display: none;隐藏掉，然后发挥自己力量写个高颜值的上传按钮，给这个按钮添加点击事件，点击的时候让上传input触发点击，ok，美化工作就完成了。

    <input type="file" id="file" style="display: none;"/>
    <button class="btn" onclick="upimg()">上传</button>

    var myfile = document.getElementById('file');
    function upimg(){
        myfile.click();
    }

上传筛选

很多时候在上传东西的时候都要进行上传筛选的工作，避免用户把什么乱七八糟的东西都往后台扔，其实input有 accept 这个属性来进行提交文件类型的筛选的。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> //选择git和jpg图片上传

但是这玩意儿有点兼容问题，其筛选还可以选择全部文件，并不能达到筛选的目的。上文说到我们用数组装用户要上传的图片，那么筛选就可以在数组push的时候进行了。
这样凡是验证不通过的filearr都不会push进去，也就提交不了了。

var filearr = [];
var myfile = document.getElementById('file');
myfile.onchange = function(){
    var files = this.files; 
    for(var i = 0;i<files.length;i++){
        if(!(files[i].type.indexOf('image')==0 && files[i].type && /\.(?:jpg|png|gif)$/.test(files[i].name)) ){
                        console.log('图片只能是jpg,gif,png');      //上传其余文件的验证根据情况自己写
                        continue;
                   };
         filearr.push(files[i]);
    }
}

上传进度条

在进行上传时有时候会有进度显示的需求，在XMLHttpRequest对象发出的HTTP请求时可以绑定progress事件，来获得传输的数据进度。

<div class="progress">
  <div  id="progressbar" style="width:0%">
    0%
  </div>
</div>

var request = new XMLHttpRequest();
    request.open("POST", "1.php",true);
    request.onreadystatechange = function(){
        if(request.readyState==4){
        }
    };
    request.upload.addEventListener('progress',progress, false);        //绑定progress事件
    request.send(formData);
    var progressbar = document.getElementById('progressbar');
    function progress(e){
        if(e.lengthComputable){
            var percentComplete = Math.round(e.loaded/ e.total * 100 );
            console.log(percentComplete);
            progressbar.style.width = percentComplete+"%";
            progressbar.innerText = percentComplete+"%";
        }
    }

至于进度条样式什么的靠自己发挥啦。

富文本编辑器问题

有很多富文本编辑器都带有文件上传的功能，但是使用是很多时候都有点小问题，在用谷哥浏览器时，点击上传按钮后很久图片选择的弹窗才出现。其原因就是上传的input设置了多个筛选的accept，比如image/*和image/svg+xml，这会导致谷哥浏览器打开文件选择弹窗特别慢。
解决办法 :涉及多个文件验证的用accept="image/jpeg, image/jpg, image/png, image/gif"，避免使用类似image/*和image/svg+xml多个文件同时验证的写法，可以修改富文本js源码，或者富文本加载完成后用file.setAttribute(‘accept’,XXX)覆盖掉。