<!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. 《Windows核心编程系列》十四谈谈默认堆和自定义堆

    堆 前面我们说过堆非常适合分配大量的小型数据.使用堆可以让程序员专心解决手头的问题,而不必理会分配粒度和页面边界之类的事情.因此堆是管理链表和数的最佳方式.但是堆进行内存分配和释放时的速度比其他方式都 ...

  2. Guilty Prince LightOJ - 1012

    Guilty Prince LightOJ - 1012 #include<cstdio> #include<cstring> ][]; int ans,h,w,T,TT; ] ...

  3. 背包DP HDOJ 5410 CRB and His Birthday

    题目传送门 题意:有n个商店,有m金钱,一个商店买x件商品需要x*w[i]的金钱,得到a[i] * x + b[i]件商品(x > 0),问最多能买到多少件商品 01背包+完全背包:首先x == ...

  4. 443 String Compression 压缩字符串

    给定一组字符,使用原地算法将其压缩.压缩后的长度必须始终小于或等于原数组长度.数组的每个元素应该是长度为1 的字符(不是 int 整数类型).在完成原地修改输入数组后,返回数组的新长度.进阶:你能否仅 ...

  5. C#特性的介绍及应用场景

    1.特性的任务:特性就是为了支持对象添加一些自我描述的信息,不影响类封装的前提添加额外信息.如果你用这个信息,那特性就有用:如果你不需要这个信息,那么这个特性就没用. 2.特性的基类:Attribut ...

  6. iOS 蓝牙的GameKit用法

    一.连接蓝牙 显示可以连接的蓝牙设备列表 - (IBAction)buildConnect:(id)sender { // 创建弹窗 GKPeerPickerController *ppc = [[G ...

  7. System.Lazy<T>延迟加载

    在很多情况下,有些对象需要在使用时加载或根据逻辑动态加载.有些情况如果不延迟加载,可能会影响效率甚至抛出Timeout Exception.如网络操作.数据库操作.文件IO操作 直接上代码,方便我们理 ...

  8. 【Gambit】Gambit使用教程

    第一章 Gambit使用 Gambit介绍 网格的划分使用Gambit软件,首先要启动Gambit,在Dos下输入Gambit <filemane>,文件名如果已经存在,要加上参数-old ...

  9. 【C++】朝花夕拾——STL vector

    STL之vector篇 N久之前是拿C的数组实现过vector中的一些简单功能,什么深拷贝.增删查找之类的,以为vector的实现也就是这样了,现在想想真是...too young too naive ...

  10. 迅为工业级arm开发板i.MX6DL开发板软件硬件全开源

    i.MX6是基于ARM Cortex™-A9架构的高扩展性多核系列应用处理器,促进了如高稳定性工业平板电脑.差异化智能本.前装车载中控系统和超高清电子书阅读器等新一代应用的发展.强劲的3D图形加速引擎 ...