原生JS和jQuery版实现文件上传功能
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head> <body>
<p><input type="file" id="upfile" name="file"></p>
<p><input type="button" id="upJS" value="用原生JS上传"></p>
<p><input type="button" id="upJQuery" value="用jQuery上传"></p>
<script>
/*原生JS版*/
document.getElementById("upJS").onclick = function () {
/* FormData 是表单数据类 */
var fd = new FormData();
var ajax = new XMLHttpRequest();
fd.append("otherParam", 1);
/* 把文件添加到表单里 */
fd.append("file", document.getElementById("upfile").files[0]);
ajax.open("post", "/cyberspace/vrv/files", true); ajax.onload = function () {
console.log(ajax.responseText);
}; ajax.send(fd); } /* jQuery 版 */
$('#upJQuery').on('click', function () {
var fd = new FormData();
fd.append("otherParam", 1);
fd.append("file", $("#upfile").get(0).files[0]);
$.ajax({
url: "/cyberspace/vrv/files",
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function (d) {
console.log(d);
}
});
});
</script>
</body>
</html>
注：http://www.jb51.net/article/82611.htm
原生JS和jQuery版实现文件上传功能的更多相关文章
- 原生JS版和jQuery 版实现文件上传功能
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- Node.js新手教程——怎样实现文件上传功能
作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- [置顶] js 实现 <input type="file" /> 文件上传
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- 使用JS实现可断点续传的文件上传方案
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
随机推荐
- JSP输出HTML时产生的大量空格和换行的去除方法
在WEB应用中,如果使用jsp作为view层的显示模板,都会被空格/空换行问题所困扰. 这个问题当年也困扰了我比较长的时间.因为在jsp内使用的EL标签和其他标签时,会产生大量的空格和换行符. ...
- 我用了7年时间成长为阿里Java架构师，你呢？（附学习路线图）
前言:我用了七年的时间,一步一步走到了现在,中途也有了解过其他的技术,也想过要转其他的语言,但是最后还是坚持下来走Java这条路,希望我的经历可以帮助到后来的人,要是觉得对你有帮助的话,可以点赞关 ...
- nginx服务器的rewrite功能
nginx编译的时候默认是把rewrite功能编辑进去的,但是因为rewrite需要使用正则表达式,因此需要安装pcre依赖包. yum install -y pcre pcre-install re ...
- PHP_SELF变量解析和重复路径解决
最近升级PHP到PHP7版本,并重新部署了新的Nginx,启动的时候发现了一个问题,全局变量$_SERVER['PHP_SELF']的值发生了改变,从而影响到代码的功能.因此我们来了解下$_SERVE ...
- 20145333茹翔 Exp5 MS08_067漏洞测试
20145333茹翔 Exp5 MS08_067漏洞测试 实验过程 IP:kali:192.168.31.177.windows 2003 :192.168.31.223 使用命令msfconsole ...
- Python3基础 __delattr__ 在一个属性被删除时的行为
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- hdu 6168 Numbers
Numbers Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total S ...
- [AtCoder ARC101D/ABC107D] Median of Medians
题目链接 题意:给n个数,求出所有子区间的中位数,组成另外一个序列,求出它的中位数 这里的中位数的定义是:将当前区间排序后,设区间长度为m,则中位数为第m/2+1个数 做法:二分+前缀和+树状数组维护 ...
- 对某项目中Vuex用法的分析
上周五刚发布一个线上版本,趁着新的需求和bug还没到来,决定分析一下正在维护的一个使用Vue 2.0 开发的后台管理系统中Vuex部分代码.这部分代码不是我写的,加上我一直在“使用”现成的而不是“搭建 ...
- 读书笔记：Spring boot实战
第一章 入门 Spring boot最重要的四个核心 : 1.自动配置:针对很多spring应用程序常见的应用功能,spring boot能自动提供相关配置 2.起步依赖:告诉spring boot需 ...