原生JS和jQuery版实现文件上传功能
更新时间：2016年04月18日 15:19:33 投稿：lijiao
这篇文章主要介绍了HTML5中用js、jQuery结合Ajax实现文件上传功能，HTML5中已经可以用Ajax上传文件了，而且代码简单，借助 FormData类即可发送文件数据，感兴趣的小伙伴们可以参考一下
本文实例分享了原生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上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
jquery easyui datagrid实现增加，修改，删除方法总结
这篇文章主要介绍了jquery easyui datagrid实现增加，修改，删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下2016-05-05
下面小编就为大家带来一篇jquery实现用户登陆界面(示例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
关于jQuery中的toggle()函数，相信大家都非常的了解，网上也有许多的相关教程，今天要给大家分享的是在实际的项目中toggle()的使用方法，需要的小伙伴可以参考下。2015-04-04
今天终于有时间把我以前写的一个jQuery插件进行整理，改进。这是一个模拟“模式对话框”的插件，该模式对话框共有三种皮肤，红、绿、蓝。2009-09-09
如果将选中的这条记录的行高亮显示，同时该行的单选按钮也被选中了，这样会提高用户的体验的，于是本文下了个示例，有需要的朋友可以参考下2013-08-08
这篇文章主要介绍了jQuery实现进度条效果代码，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章介绍了jquery实现文字由下到上循环滚动的实例代码，有需要的朋友可以参考一下2013-08-08
获取子节点和父节点的方法有很多，在本文为大家详细介绍下jquery中时如何实现的，感兴趣的朋友可以参考下2013-09-09
想必大家对jquery $.each()并不陌生吧，使用它可以进行元素的遍历，下面有个不错的示例，感兴趣的朋友可以参考下2013-09-09
最近接到新需求，需要实现一个点击发送验证码之后，按钮禁用，在5秒之后取消禁用，看似需求很简单，实现起来还真的好好动动脑筋，下面小编把jquery控制按钮禁用核心代码分享给大家，需要的朋友参考下吧2021-07-07
最新评论