<!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. linux php5.6 提示 could not find driver

    1.进入在PHP源码包中进入ext/pdo_mysql # wget http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 2.然后是解压缩. # tar -zxvf ...

  2. 《白书》上线段树RMQ的实现

    白书上的线段树RMQ实现,自己重写了一遍: #include <bits/stdc++.h> using namespace std; const int MAXN=1<<17 ...

  3. 二分+树状数组/线段树(区间更新) HDOJ 4339 Query

    题目传送门 题意:给两串字符串,操作1:替换其中一个字符串的某个位置的字符 操作2:查询从p开始相等的最长连续长度 分析:树状数组可以维护一个区间内公共长度(连续)的情况,查询时用二分查找最远的端点即 ...

  4. 题解报告：hdu 1261 字串数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1261 Problem Description 一个A和两个B一共可以组成三种字符串:"ABB ...

  5. 自定义View(11)**在onDraw中使用矩阵Matrix

    1.代码示例 1.1 效果 原图 : 其尺寸为162 x 251,示例中的红点是变形的锚点. 变形之后: 1.2 代码 package com.e.weixin.session.view; impor ...

  6. Nuget 自定义配置（官网）

    <?xml version="1.0" encoding="utf-8"?> <configuration> <config> ...

  7. 从GridView中直接导出数据到Excel文件 处理导出乱码 类型“GridView”的控件“XXXX”必须放在具有 runat=server 的窗体标记内。”的异常

    导出到Excel方法: <span style="color: rgb(0, 0, 255);">public</span> <span style= ...

  8. 解决hibernate对Sql Server分页慢的问题

    一.hibernate分页 hibernate对MsSql的伪分页 分页是web项目中比不可少的一个功能,数据量大的时候不能全部展示必然要用到分页技术.相信大家对hibernate中的分页都不陌生: ...

  9. NOT IN、NOT EXISTS的相关子查询改用LEFT JOIN--sql2000性能优化

    参考文章:SQL SERVER性能优化综述(很好的总结,不要错过哦) 数据库:系统数据库 子查询的用法 子查询是一个 SELECT 查询,它嵌套在 SELECT.INSERT.UPDATE.DELET ...

  10. MySQL性能优化之max_connections配置

    MySQL的最大连接数,增加该值增加mysqld 要求的文件描述符的数量.如果服务器的并发连接请求量比较大,建议调高此值,以增加并行连接数量,当然这建立在机器能支撑的情况下,因为如果连接数越多,介于M ...