原生JS和jQuery版实现文件上传功能
本文实例分享了原生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上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助。
-
本文向大家介绍简单实现js上传文件功能，包括了简单实现js上传文件功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现上传文件功能的具体代码，供大家参考，具体内容如下 一、用input完成上传，效果图如 选择文件后，提交后出现图片url 二、传输格式采用form-data形式。 html代码 js部分 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大
-
本文向大家介绍JQuery fileupload插件实现文件上传功能，包括了JQuery fileupload插件实现文件上传功能的使用技巧和注意事项，需要的朋友参考一下 道理相通，我简单分享下在.net MVC下的实装。 1.制作Model类 2.实装controller里的对应方法，我这个处理逻辑比较复杂，懒得修改了，反正就这个意思 3.页面的实装 √，就是这个样子 还附赠了一个简易lodin
-
本文向大家介绍jquery ajax实现文件上传功能实例代码，包括了jquery ajax实现文件上传功能实例代码的使用技巧和注意事项，需要的朋友参考一下 下面看下ajax实现文件上传 没有使用插件 一、单文件上传 二、多文件上传 这个是多选上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口。 当然也可以使用单文件上传的模式，多次选择就可以了，只
-
本文向大家介绍原生JavaScript实现异步多文件上传，包括了原生JavaScript实现异步多文件上传的使用技巧和注意事项，需要的朋友参考一下 这是在上篇的修改版本。后台代码不变就可以接着使用，但是脚本不再使用jQuery了，改为原生的JavaScript 代码，所以我们主要看JS代码。 先介绍一下技术参数： 页面技术：HTML5 后台技术：Servlet 3.0 服务器：Tomcat 7.0
-
本文向大家介绍ajaxfileupload.js实现上传文件功能，包括了ajaxfileupload.js实现上传文件功能的使用技巧和注意事项，需要的朋友参考一下 使用ajaxfileupload.js实现上传文件功能 一、ajaxFileUpload是一个异步上传文件的jQuery插语法：$.ajaxFileUpload([options]) options参数说明： 1、url
-
本文向大家介绍AjaxUpLoad.js实现文件上传功能，包括了AjaxUpLoad.js实现文件上传功能的使用技巧和注意事项，需要的朋友参考一下 AjaxUpLoad.js的使用实现无刷新文件上传，如图。 图1 文件上传前 图2 文件上传后 1、创建页面并编写HTML 上传文档: 上传图片: 2、引用AjaxUpload.js文件 3、编写JS脚本 4、创建/Common/UploadHan