<!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. nginx作防盗链设置

    盗链是一种损害原有网站合法权益,给原网站所在服务器造成额外负担的非法行为. 盗链的实现原理: 客户端向服务器请求资源时,为了减少网络带宽,提高响应时间,服务器一般不会一次将所有资源完整地传回给客户端. ...

  2. CreateDirectory 创建文件夹 C\C++

    函数原型: CreateDirectory( LPCTSTR lpPathName, LPSECURITY_ATTRIBUTES lpSecurityAttributes ); 简介: CreateD ...

  3. Python3基础 函数 无参数无返回值 调用会输出hello world的函数

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

  4. Https流程,openssl本地自建证书,抓包

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

  5. 'curl' is not recognized as an internal or external command

    使用everything搜索本地的curl.exe发现如下 官网查看最新版本https://curl.haxx.se/windows/ 2019-03-06 最新版本7.64.0 curl-7.64. ...

  6. TeeChart的坐标轴

    TeeChart一共有六个坐标轴,一下是默认值 tChart1.Axes.Bottom.Visible = true;//横轴 tChart1.Axes.Left.Visible = true;//纵 ...

  7. 【附6】hystrix metrics and monitor

    一.基本方式 hystrix为每一个commandKey提供了计数器 二.实现流程 https://raw.githubusercontent.com/wiki/Netflix/Hystrix/ima ...

  8. 论文笔记——Channel Pruning for Accelerating Very Deep Neural Networks

    论文地址:https://arxiv.org/abs/1707.06168 代码地址:https://github.com/yihui-he/channel-pruning 采用方法 这篇文章主要讲诉 ...

  9. OpenFlow protocol version 1.0 通信过程

    参考 李呈:[原创]OpenFlow通信流程解读 OpenFlow protocol version 1.0 通信过程 通信双方: OpenFlow控制器,OpenFlow交换机. 通信模块: Sec ...

  10. ubuntu 14.04 (desktop amd 64) 下载

    http://cdimage.ubuntu.com/ubuntukylin/releases/14.04/release/