图片上传那些事-总结篇

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

1.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();
    }

2.上传筛选
很多时候在上传东西的时候都要进行上传筛选的工作,避免用户把什么乱七八糟的东西都往后台扔,其实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]);
    }
}

3.上传进度条
在进行上传时有时候会有进度显示的需求,在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+"%";
        }
    }

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

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

您也可能喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注