<!doctype html>

<html lang="zh">

<head>

    <meta charset="utf-8">

    <title>HTML5 Ajax Uploader</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p><input type="file" id="upfile" name="file"></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("otherParam", 1);

        /* 把文件添加到表单里 */

        fd.append("file", document.getElementById("upfile").files[0]);

        ajax.open("post", "/cyberspace/vrv/files", true);

        ajax.onload = function () {

            console.log(ajax.responseText);

        };

        ajax.send(fd);

    }

    /* jQuery 版 */

    $('#upJQuery').on('click', function () {

        var fd = new FormData();

        fd.append("otherParam", 1);

        fd.append("file", $("#upfile").get(0).files[0]);

        $.ajax({

            url: "/cyberspace/vrv/files",

            type: "POST",

            processData: false,

            contentType: false,

            data: fd,

            success: function (d) {

                console.log(d);

            }

        });

    });

</script>

</body>

</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. 20145106 《Java程序设计》第9周学习总结

    教材学习内容总结 JDBC标准主要分为两个部分:JDBC应用程序开发者接口以及JDBC驱动程序开发者接口. 如果将来要换为Oracle数据库,只要置换Oracle驱动程序. Java中的数据类型和SQ ...

  2. 20145313exp9

    问题回答 SQL注入攻击原理,如何防御 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序 ...

  3. Android实践项目汇报-改（一）

    Google天气客户端NABC Need(需求):  功能性需求分析 天气预报客户端,顾名思义就是为用户提供实时准确的天气信息,方便用户出行生活.根据用户日常需求,软件完成后点开,载入界面,显示查询界 ...

  4. cron表达式增加一段时间变为新的表达式

    cron表达式是使用任务调度经常使用的表达式了.对于通常的简单任务,我们只需要一条cron表达式就能满足.但是有的时候任务也可以很复杂. 最近我遇到了一个问题,一条任务在开始的时候要触发A方法,在结束 ...

  5. Duilib 实现右下角弹出像QQ新闻窗口，3秒后自动关闭(一)

    转载:https://blog.twofei.com/667/ 自绘或子类化控件时,有时需要处理鼠标进入(MouseEnter)/鼠标离开(MouseLeave)/鼠标停留(MouseHover)消息 ...

  6. linux网络编程--网络编程的基本函数介绍与使用【转】

    本文转载自:http://blog.csdn.net/yusiguyuan/article/details/17538499 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览 ...

  7. linux内核启动参数解析及添加

    1.环境: ubuntu16.04 Linux jello 4.4.0-89-generic #112-Ubuntu SMP Mon Jul 31 19:38:41 UTC 2017 x86_64 x ...

  8. Https流程，openssl本地自建证书，抓包

    HTTPS:超文本安全传输协议,和HTTP相比,多了一个SSL/TSL的认证过程,端口为443在http(超文本传输协议)基础上提出的一种安全的http协议,因此可以称为安全的超文本传输协议.http ...

  9. Linux CentOS 7 下 JDK 安装与配置

    前言 简单记录一下在CentOS 7中安装配置JDK 1.7的全过程~  ( 安装别的版本或者jre一样) 下载 首先是jdk 1.7 64bit & 32bit的下载地址: jdk-7u79 ...

  10. Java filter中的chain.doFilter详解

    转载: 一.chain.doFilter作用 1.一般filter都是一个链,web.xml 里面配置了几个就有几个.一个一个的连在一起 request -> filter1 -> fil ...