js文件上传以及js清空input file值

最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅!

本教程从 原生JS, jQuery, 两处着手简单介绍文件上传案例

1、原生JS

 

var test= document.getElementById('test');

var formData = new FormData();

formData.append('version_file', test.files[0]);



var ajax = new XMLHttpRequest();

ajax.open("post", "test.php", true);

ajax.send(formData );

2、jQuery

var formData = new FormData();

var test = $('#test')[0].files[0];		//或者 $('#test').get(0).files[0]);

formData.append('version_file', test);


$.Ajax({
	type: 'POST',
	url: 'test.php',
	data:formData,
        cache: false,//上传文件无需缓存
       	processData: false,//用于对data参数进行序列化处理 这里必须false
       	contentType: false, //必须
	success: function(res){
		console.log(res)
	}
})

 

这里我打印下$('#test') , 解释下 $('#test')[0].files[0] 的出处，看下图：

 

============================================================

============================================================

============================================================

接下来就是上传完文件后把input type为file的文本框的文件信息清除了

方法有三：

【1】

var test = document.getElementById('test');
test.value = ''; 					//虽然test的value不能设为有字符的值，但是可以设置为空值

 

【2】

 

var test = document.getElementById('test');
test.outerHTML = test.outerHTML; 	                //重新初始化了test的html

 

【3】有人在博客提出这种方法，测试无效！

var test = document.getElementById('test');
test.select(); 
document.selection.clear();

笔者项目是用AngularJS 1进行开发的。据说ng-file-upload插件也可以上传文件，没有尝试，亲们可以试下！

 

参考资料:

 

原生JS和jQuery版实现文件上传功能

js清空input file的值

input file选择文件上传后清空选择框文件信息两种解决方案