文件上传之文件大小或者格式等限制的处理（二）

1. 点击文件上传，触发上传文件选择

html结构：

        <div class="item">
			<h2>单一文件上传 FROM-DATA</h2>
			<div class="file-border" id="upload1">
				<!-- accept =".png, .jpg" 限定文件上传格式-->
				<input type="file" class="upload_inp" style="display: none;" />
				<button class="upload_button select disable">选择文件</button>
				<button class="upload_button upload">上传到服务器</button>
				<br />
				<div class="upload_tip">只能上传PNG/JPEG/JPG 格式，大小不超过2MB</div>
				<ul class="upload_list" style="display: none;">
					<li>
						<span>文件：...</span>
						<span><em>移除</em></span>
					</li>
				</ul>
			</div>
        </div>

vue 代码：

//第一个闭包
let upload1 = function () {
	let upload = document.querySelector('#upload1'),
			upload_inp = upload.querySelector('.upload_inp'),
			upload_button_select = upload.querySelector('.upload_button.select'),
			upload_button_upload = upload.querySelector('.upload_button.upload'),
			upload_tip = upload.querySelector('.upload_tip'),
			upload_list = upload.querySelector('upload_list');
			// console.log(upload_tip)
			
			//点击选择文件按钮，触发上传文件行为
			upload_button_select.addEventListener('click', function(){
				upload_inp.click();
			})
};
export default upload1

效果：

 2. 限制文件上传的格式 :

 方案一：基于 js 处理：

//2. 监听用户选择文件的操作
upload_inp.addEventListener('change', function(){
	//获取用户选中的文件
	let file = upload_inp.files[0];
	if(!file) return;
	
	//限制文件上传的格式 
	//test() 方法用于检测一个字符串是否匹配某个模式 RegExpObject.test(string).
	if (!/(PNG|JPG|JPRG)/i.test(file.type)) {
		alert('上传的文件只能是 PNG/JPG/JPEG 的格式');
		return;
	}
})

 方案二： 直接在表达元素中使用属性 accept，多个参数之间用逗号分隔

这种方式，不用做任何提示词，用户只能选择指定格式的文件，不符合的文件会置灰，不能被选择

<input type="file" class="upload_inp" style="display: none;" accept=".png, .jpg"  />

限制上传文件大小：限制文件上传大小 2MB 1kb = 1014B, size 的单位是 B 字节

if (file.size > 2*1024*1024) {
	alert('上传的文件不能超过2MB');
	return;
}

显示上传的文件：

                //显示上传的文件，让tip 隐藏，让list 显示
				upload_tip.style.display = 'none';
				upload_list.style.display = 'block';
				upload_list.innerHTML = `<li>
						<span>文件：${file.name}</span>
						<span><em>移除</em></span>
					</li>`;

移除操作：

在处理动态元素绑定的操作的时候，使用事件委托更加的方便

            //3. 移除按钮的点击处理（使用时间委托处理）
			upload_list.addEventListener('click', function(ev){
				let target = ev.target;
				if ( target.tagName === 'EM') {
					//点击的是移除按钮
					upload_tip.style.display = 'block';
					upload_list.style.display = 'none';
					upload_list.innerHTML = ``;
				}
			})

完整的js 代码：

//第一个闭包
let upload1 = function () {
	let upload = document.querySelector('#upload1'),
			upload_inp = upload.querySelector('.upload_inp'),
			upload_button_select = upload.querySelector('.upload_button.select'),
			upload_button_upload = upload.querySelector('.upload_button.upload'),
			upload_tip = upload.querySelector('.upload_tip'),
			upload_list = upload.querySelector('.upload_list');
			// console.log(upload_tip)
			
			//3. 移除按钮的点击处理（使用时间委托处理）
			upload_list.addEventListener('click', function(ev){
				let target = ev.target;
				if ( target.tagName === 'EM') {
					//点击的是移除按钮
					upload_tip.style.display = 'block';
					upload_list.style.display = 'none';
					upload_list.innerHTML = ``;
				}
			})
			
			//2. 监听用户选择文件的操作
			upload_inp.addEventListener('change', function(){
				//获取用户选中的文件
				let file = upload_inp.files[0];
				if(!file) return;
				//限制文件上传的格式 
				//test() 方法用于检测一个字符串是否匹配某个模式 RegExpObject.test(string).
				if (!/(PNG|JPG|JPRG)/i.test(file.type)) {
					alert('上传的文件只能是 PNG/JPG/JPEG 的格式');
					return;
				}
				
				//限制文件上传大小 2MB 1kb = 1014B, size 的单位是 B 字节
				if (file.size > 2*1024*1024) {
					alert('上传的文件不能超过2MB');
					return;
				}
				
				//显示上传的文件，让tip 隐藏，让list 显示
				upload_tip.style.display = 'none';
				upload_list.style.display = 'block';
				upload_list.innerHTML = `<li>
						<span>文件：${file.name}</span>
						<span><em>移除</em></span>
					</li>`;
				
			})
			
			//1. 点击选择文件按钮，触发上传文件行为
			upload_button_select.addEventListener('click', function(){
				upload_inp.click();
			})
};
export default upload1