XHR

我想用jQuery异步上传文件。 这是我的HTML： <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> 这是我的jQuery代码： $(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); 我只获取文件名，而不是上传文件。 我该怎么做才能解决此问题？ #1楼 我已经在Rails环境中编写了此代码 。 如果您使用轻量级的jQuery-form插件，则仅包含五行JavaScript。 挑战在于如何使AJAX上传工作，因为标准 remote_form_for 无法理解多部分表单提交。

Struts2 对文件上传是通过 file upload 拦截器实现的，具体引入方法见 这里 。然而 File Upload 拦截器似乎对于 XHR 过来的文件上传请求无法响应。 MMP老子试了半天。 用ajax + formData 的方式 文件能传出去（在浏览器HTTP请求中能看到） HTML： <input id="file" type="file" name="upload"/> <input id="uploadBtn"class="btn-b-m" type="button" value="上传" /> JS: $("#uploadBtn").click(function () { var formData = new FormData(); formData.append("upload", $("#file").get(0).files[0]); jQuery.ajax({ enctype: 'multipart/form-data', url: '/json/blackWhiteLimit/fileUpload.action', type: "post", data: formData, processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 success:

看到标题时，有些同学可能会想：“我已经用 xhr 成功地发过很多个 Ajax 请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用 xhr 时踩了不少坑儿，我才突然发现其实自己并不够了解 xhr ，我知道的只是最最基本的使用。 于是我决定好好地研究一番 xhr 的真面目，可拜读了不少博客后都不甚满意，于是我决定认真阅读一遍W3C的 XMLHttpRequest 标准。看完标准后我如同醍醐灌顶一般，感觉到了从未有过的清澈。这篇文章就是参考W3C的 XMLHttpRequest 标准和结合一些实践验证总结而来的。 Ajax 和 XMLHttpRequest 我们通常将 Ajax 等同于 XMLHttpRequest ，但细究起来它们两个是属于不同维度的2个概念。 以下是我认为对 Ajax 较为准确的解释：（摘自 what is Ajax ） AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script. AJAX is based on the

”XMLHttpRequest 的异步调用网上找的例子运行没问题，但稍微改了一点点就报错”InvalidStateError: XMLHttpRequest has an invalid context“。断断续续 搞了3天终于通了，可以接收二进制文件了。 “ 之后找到了下篇文章，发现我所使用的方法是下方中的老方法。准备再按下文所说新方法试试。 下文是2011写的了，想必所说内容到现在已是所有浏览器都支持的了吧。 以下转自： https://www.html5rocks.com/zh/tutorials/file/xhr2/。 XMLHttpRequest2 新技巧 HTML5 Rocks 目录 简介 抓取数据 发送数据 跨源资源共享 (CORS) 实际示例： 参考 By Eric Bidelman 已发布: 五月 27th, 2011 Comments: 0 简介 HTML5 世界中有这样一位无名英雄： XMLHttpRequest 。严格地说，XHR2 并不属于 HTML5。不过，它是浏览器供应商对于核心平台不断做出的改进中的一部分。我之所以将 XHR2 加入我们新的百宝囊中，就是因为它在如今复杂的网络应用中扮演了不可或缺的角色。 结果呢，我们这位老朋友来了个大变身，很多人都不知道它的新功能了。 2 级 XMLHttpRequest 引入了大量的新功能（例如跨源请求

XMLHttpRequest 是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。 最早，微软在IE 5引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。 但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5的概念形成后，W3C开始考虑标准化这个接口。2008年2月，就提出了 XMLHttpRequest Level 2 草案。 这个XMLHttpRequest的新版本，提出了很多有用的新功能，将大大推动互联网革新。本文就对这个新版本进行详细介绍。 一、老版本的XMLHttpRequest对象 在介绍新版本之前，我们先回顾一下老版本的用法。 首先，新建一个XMLHttpRequest的实例。 　　var xhr = new XMLHttpRequest(); 然后，向远程主机发出一个HTTP请求。 　　xhr.open('GET', 'example.php'); 　　xhr.send(); 接着，就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数。 　　xhr.onreadystatechange = function(){ 　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) { 　　　　　　alert( xhr

XMLHttpRequest 是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。 最早，微软在IE 5引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。 但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5的概念形成后，W3C开始考虑标准化这个接口。2008年2月，就提出了 XMLHttpRequest Level 2 草案。 这个XMLHttpRequest的新版本，提出了很多有用的新功能，将大大推动互联网革新。本文就对这个新版本进行详细介绍。 一、老版本的XMLHttpRequest对象 在介绍新版本之前，我们先回顾一下老版本的用法。 首先，新建一个XMLHttpRequest的实例。 　　var xhr = new XMLHttpRequest(); 然后，向远程主机发出一个HTTP请求。 　　xhr.open('GET', 'example.php'); 　　xhr.send(); 接着，就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数。 　　xhr.onreadystatechange = function(){ 　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) { 　　　　　　alert( xhr

一. 环境准备 我一直在探索 Cocos H5正确的开发姿势 ，目前做javascript项目已经离不开 nodejs、npm或grunt等脚手架工具了。 1.初始化package.json文件 > npm init 当新建好cocos-js或creator项目，在项目根目录使用 npm init 命令，一路回车，将在当前目录创建 package.json 文件用于nodejs三方模块的管理。关于npm的使用细节网络上有很多教程，在此不用细说。 2. protobufjs模块 本人最早在cocos2dx 2.x时代就开始用 protobufjs 模块来操纵protobuf一直到现在。所以下面所有内容都是关于protobufjs在cocos creator中的使用，包括原生平台(cocos2d-js也是大同小异)。 安装protobufjs到项目 > npm install protobufjs @5 --save 使用npm install命令安装模块，注意我们这里使用的是protobufjs 5.x版本。 虽然protobufjs目前最新的 6.x版本，提供了ts、rpc等功能的支持，但有一个问题是在微信小游戏中不能动态加载proto文件。 安装protobufjs到全局 > npm install -g protobufjs @5 使用npm install -g

gopherjs 生态里有 XMLHttpRequest 的包装 honnef.co/go/js/xhr 库（ 项目地址 ， 文档 ） XMLHttpReqeust 文档 例子 package main import ( "github.com/gopherjs/gopherjs/js" "honnef.co/go/js/xhr" ) type Reply struct { *js.Object Headers map[string]string `js:"headers"` } func main() { req := xhr.NewRequest("GET", "http://httpbin.org/get") req.ResponseType = "json" err := req.Send(nil) if err != nil { println("err:", err) return } if req.Status != 200 { println("err:", req.StatusText) return } println(req.Response) reply := &Reply{Object: req.Response} ua := reply.Headers["User-Agent"] println("UA:", ua) } 通过 xhr

jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 语法： $(selector).load(URL,data,callback); 必需 的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。 这是示例文件（"demo_test.txt"）的内容： <h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p> 下面的这句话会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中： $("#div1").load("demo_test.txt"); 也可以把 jQuery 选择器添加到 URL 参数。 下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中： $("#div1").load("demo_test.txt #p1"); 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数： •responseTxt -

相信做过前端的小伙伴们都写过图片上传，最简单的方式是通过表单提交，一个<input type="file">加一个 <button type="submit"> ，外面包一层form就搞定了。（ button默认的type是submit，这里可以省略，之所以特别写出来，是因为以前碰到过form标签里面写了一个<button>标签，一点击就莫名奇妙地把表单提交了，希望大家引以为戒 ） 但是表单提交会刷新整个页面，于是有心的朋友为了做无刷新的表单提交，可能就会搞一个 隐藏的iframe ，然后将 form标签的target 指向这个iframe，这样用户就感知不到页面的刷新。 更细心点的朋友可能会在<input type="file">加上一个 accept="image/*" 属性，使文件选择框只能选择图片，不过如果你在chrome上这样写可能会碰到窗口打开非常慢的情况，并不是电脑卡，根本原因是当打开文件选择器时，chrome会访问谷歌服务器来拉取图片的 mime-type ，但是因为天朝的科学上网机制，谷歌当然是访问不了的，所以会有几秒连接超时前的卡顿，如果你有速度够快的梯子，应该可以避免这种情况。比较适应国情的方法是直接在accept里面写上你需要的mime-type，只要是在chrome的白名单里面，就不会去访问谷歌啦，比如： <input type="file" name=