原生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 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
Yii全局函数用法示例
2017/01/22 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
使用python根据端口号关闭进程的方法
2018/11/06 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
给民警的表扬信
2014/01/08 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
信访维稳承诺书
2015/05/04 职场文书
天气温馨提示语
2015/07/14 职场文书
社区服务理念口号
2015/12/25 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python
golang使用map实现去除重复数组
2022/04/14 Golang