1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>HTML5 Ajax Uploader</title>
  6.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <p><input type="file" id="upfile" name="file"></p>
  11. <p><input type="button" id="upJS" value="用原生JS上传"></p>
  12. <p><input type="button" id="upJQuery" value="用jQuery上传"></p>
  13. <script>
  14.     /*原生JS版*/
  15.     document.getElementById("upJS").onclick = function () {
  16.         /* FormData 是表单数据类 */
  17.         var fd = new FormData();
  18.         var ajax = new XMLHttpRequest();
  19.         fd.append("otherParam", 1);
  20.         /* 把文件添加到表单里 */
  21.         fd.append("file", document.getElementById("upfile").files[0]);
  22.         ajax.open("post", "/cyberspace/vrv/files", true);
  23.  
  24.         ajax.onload = function () {
  25.             console.log(ajax.responseText);
  26.         };
  27.  
  28.         ajax.send(fd);
  29.  
  30.     }
  31.  
  32.     /* jQuery 版 */
  33.     $('#upJQuery').on('click', function () {
  34.         var fd = new FormData();
  35.         fd.append("otherParam", 1);
  36.         fd.append("file", $("#upfile").get(0).files[0]);
  37.         $.ajax({
  38.             url: "/cyberspace/vrv/files",
  39.             type: "POST",
  40.             processData: false,
  41.             contentType: false,
  42.             data: fd,
  43.             success: function (d) {
  44.                 console.log(d);
  45.             }
  46.         });
  47.     });
  48. </script>
  49. </body>
  50. </html>

注：http://www.jb51.net/article/82611.htm

原生JS和jQuery版实现文件上传功能的更多相关文章

  1. 原生JS版和jQuery 版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  2. Node.js新手教程——怎样实现文件上传功能

    作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...

  3. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  4. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  5. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  6. Bootstrap fileinput.js，最好用的文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link ty ...

  7. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  8. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  9. 使用JS实现可断点续传的文件上传方案

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

随机推荐

  1. C++微专业课程辅导（内存模型和动态内存）

    “除了静态内存和栈内存之外,每个程序还拥有一个内存池.这部分空间被称作自由空间(free store)或堆(heap).程序用堆来存储动态分配(dynamically allocate)的对象”——& ...

  2. 09: xmltodict 模块将xml格式转成json格式

    1.1 : xmltodict 模块将xml格式转成json格式 <?xml version="1.0"?> <!--#版本号--> <data> ...

  3. Python3基础 file read 读取txt文件的前几个字符

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. （转）MyBatis & MyBatis Plus

    (二期)3.mybatis与mybatis plus [课程三]mybatis ...运用.xmind0.1MB [课程三]mybatis...机制.xmind0.2MB [课程三]mybatis与j ...

  5. 【第三十六章】 metrics（4）- metrics-graphite

    将metrics report给graphite(carbon-relay) 一.代码 1.pom.xml <!-- metrics-graphite --> <dependency ...

  6. grpc python quickstart

    参考:grpc python quickstart 准备 1.升级pip $ python -m pip install --upgrade pip 2.安装grpc $ python -m pip ...

  7. 学习mybatis-3 step by step 篇四

    日志 Mybatis内置的日志工厂提供日志功能,具体的日志实现有以下几种工具: SLF4J Apache Commons Logging Log4j 2 Log4j JDK logging 具体选择哪 ...

  8. 一些WGS健康体检网站和公司

    1.wegen https://www.wegene.com/ 2.阅己基因 http://www.selfgene.com/

  9. Myeclipse中xml文件里自动提示消失解决办法

    IED Eclipse Java EE IDE for Web Developers:DTD 类型约束文件    1. Window->Preferences->XML->XML C ...

  10. python网络编程之TCP通信实例

    一. server.py import socket host="localhost" port= s=socket.socket(socket.AF_INET,socket.SO ...