图片上传那些事-总结篇

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

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进去，也就提交不了了。
当然还有一个小问题，但是这个问题一般来说可以忽略，当用户选择了一张图后下一次再次选择同一张图时并没有push，因为没有触发onchange事件，你想这样也能添加的话就把input的value清空一下。

var filearr = [];
var myfile = document.getElementById('file');
myfile.onchange = function(){
	var files = this.files; 
	if(!files.length)return;
	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]);
	}
	//this.value = ''; 重复提交同一张图片
}

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)覆盖掉。