原生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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 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
在JavaScript中调用php程序
2009/03/09 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
三个python爬虫项目实例代码
2019/12/28 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
健康状况证明模板
2014/10/23 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python