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


Posted in Javascript onApril 18, 2016

本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="jquery-2.1.1.min.js"></script>
</head>

<body>
<p><input type="file" id="upfile"></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("upload", 1);
 /* 把文件添加到表单里 */
 fd.append("upfile", document.getElementById("upfile").files[0]);
 ajax.open("post", "test.php", true);

 ajax.onload = function () {
 console.log(ajax.responseText);
 };

 ajax.send(fd);
 
}

/* jQuery 版 */
$('#upJQuery').on('click', function() {
 var fd = new FormData();
 fd.append("upload", 1);
 fd.append("upfile", $("#upfile").get(0).files[0]);
 $.ajax({
 url: "test.php",
 type: "POST",
 processData: false,
 contentType: false,
 data: fd,
 success: function(d) {
 console.log(d);
 }
 });
});
</script>
</body>
</html>

php代码:

<?php
if (isset($_POST['upload'])) { 
var_dump($_FILES);
move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
//header('location: test.php');
exit;
}
?>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
JavaScript数组复制详解
Feb 02 Javascript
js实现百度搜索提示框
Feb 05 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
You might like
PHP音乐采集(部分代码)
2007/02/14 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python中关于日期时间处理的问答集锦
2013/03/08 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python通过http下载文件的方法详解
2019/07/26 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python短信轰炸的代码
2020/03/25 Python
Python requests上传文件实现步骤
2020/09/15 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
自荐书模板
2013/12/19 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
辞职信如何写
2015/02/27 职场文书
单位接收证明格式
2015/06/18 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
MongoDB支持的数据类型
2022/04/11 MongoDB