最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对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] 的出处,看下图:
============================================================
============================================================
============================================================
接下来就是上传完文件后把input type为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插件也可以上传文件,没有尝试,亲们可以试下!
参考资料: