<!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>

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

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

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

  2. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

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

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

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

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

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

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

  6. Node.js 博客实例（三）添加文件上传功能

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...

  7. MVC5：使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  8. nodejs 实现简单的文件上传功能

    首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传 ...

  9. PHPCMS_V9 模型字段添加单文件上传功能

    后台有“多文件上传”功能,但是对于有些情况,我们只需要上传一个文件,而使用多文件上传功能上传一个文件,而调用时调用一个文件URL太麻烦了. 使用说明: 1.打开phpcms\modules\conte ...

  10. 配置php.ini实现PHP文件上传功能

    本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...

随机推荐

  1. Microsoft函数调用约定

    Microsoft函数调用约定 对于所有调用共有的约定:ebx.ebp.esi.edi都是calle-save,即由被调用的函数负责它们的保存(如果被调用函数用到了这些寄存器的话) 先看函数调用发生了 ...

  2. [Usaco2009 Feb]庙会捷运Fair Shuttle

    Description 公交车一共经过N(1<=N<=20000)个站点,从站点1一直驶到站点N.K(1<=K<=50000)群奶牛希望搭乘这辆公交车.第i群牛一共有Mi(1& ...

  3. [转]1小时内打造你自己的PHP MVC框架

    简介 MVC框架在现在的开发中相当流行,不论你使用的是JAVA,C#,PHP或者IOS,你肯定都会选择一款框架.虽然不能保证100%的开发语言都会使用框架,但是在PHP社区当中拥有*多数量的MVC框架 ...

  4. SQL Server性能调优——报表数据库与业务数据库分离

    前段时间把公司的主数据库切了,分成业务库和报表库,业务库向报表库进行实时的Replication.这个项目的上线提升了系统的性能和可维护性,现在把设计时的考量和所做的工作重新回顾一下,作为备忘. 项目 ...

  5. Node.js——重定向

  6. C++11并发之std::mutex

    知识链接: C++11并发之std::thread   本文概要: 1. 头文件. 2.std::mutex. 3.std::recursive_mutex. 4.std::time_mutex. 5 ...

  7. C# 支持多线程

    C# 支持多线程并行执行程序 .一个程序由一个单线程开始,该单线程由CLR和操作系统创建而成,并具有多线程创建额外线程的功能. .创建线程的方法 2.1 通过Thread类来创建线程. ThreadS ...

  8. java线程学习2

    sleep  变为阻塞态  但不释放锁  休眠指定毫秒时间 yield  变为就绪态  可能立即被执行  也可能不立即被执行 join   插队  暂停当前执行的线程  让调用join的线程先执行 线 ...

  9. No-4.变量的基本使用

    变量的基本使用 程序就是用来处理数据的,而变量就是用来存储数据的 目标 变量定义 变量的类型 变量的命名 01. 变量定义 在 Python 中,每个变量 在使用前都必须赋值,变量 赋值以后 该变量  ...

  10. Syslinux编译环境配置简要步骤

    由于毕业设计要做一个加密U盘的LINUX,需要修改一sysylinux引导程序,在网上很少有关于syslinux编译环境配置的文章,在此简要总结一下,发出来共享. 需要的软件: 1.  vmware ...