原生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 indexOf函数使用说明
Jul 03 Javascript
Javascript的一种模块模式
Sep 08 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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
2006/12/23 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python 文件管理实例详解
2015/11/10 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
使用K.function()调试keras操作
2020/06/17 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
css3的transition属性详解
2014/12/15 HTML / CSS
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
企业演讲比赛主持词
2014/03/18 职场文书
森林病虫害防治方案
2014/06/02 职场文书
技术经济专业求职信
2014/09/03 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
风之谷观后感
2015/06/11 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书