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参数进行序列化处理 这里必须falsecontentType: 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选择文件上传后清空选择框文件信息两种解决方案

js文件上传以及js清空input file值相关推荐

html文件上传限制类型,html input file accept 上传文件类型限制格式 MIME 类型列表
单点登录改进版-使用ajax分发cookie避免重定向轮询前言继上一篇博文:可跨域的单点登录(SSO)实现方案[附.net代码]虽然实现了单点登录,也存在很多不合理的地方.很多热心的朋友也给出了很 ...
js文件上传，java后台接收
js文件上传,java后台接收 js文件上传,java后台如何接收前端写法如下 <!DOCTYPE html> <html><head><meta char ...
JS - 文件上传组件WebUploader使用详解1（带进度的文件上传
一.基本介绍 1,什么是 WebUploader? WebUploader 是由百度公司团队开发的一个以 HTML5 为主,FLASH 为辅的现代文件上传组件. 官网地址:http://fex.bai ...
fileinput.js php,JS文件上传神器bootstrap fileinput的解析
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,具有一定的参考价值,感兴趣的小伙伴们可以 ...
js文件上传—图片压缩
-需求- 前台上传图片过程中,需要在前台对图片进行压缩,然后传到后台. -限制- 使用现有现有后台文件上传处理代码,即:不可修改后台处理代码. -技术问题- js如何压缩图片,图片压缩后如何上传到后台 ...
ajax多文件上传，js限制上传文件大小，文件上传前在浏览器展示
文件上传是非常常见的功能,这里实现一个多文件上传的例子,前端能够控制上传文件的大小,并在前端展示选择的文件的信息,采用vue+jquery+springboot实现.效果如下: 点击生成的图片可以直接 ...
AjaxUpLoad.js文件上传插件的使用
一.页面中的配置 <aebiz:file property="bigPicData" fileType="<%=FileConst.FILE_TYPE_PIC ...
html表单调用js文件上传,简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下一.用input完成上传,效果图如选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代 ...
求超大文件上传方案( js )
文件夹上传:从前端到后端文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

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

js文件上传以及js清空input file值相关推荐

最新文章

热门文章