js文件上传以及js清空inputfile值的方法教程

最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对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: data,
	success: function(res){
		console.log(res)
	}
})

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

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

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

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

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

方法有三：

【1】

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

【2】

var test = doucment.getelementbyid('test');
test.outerhtml = test.outerhtml; 	 //重新初始化了test的html

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

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

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