使用FormData,进行Ajax请求并上传文件
前段时间做了个手机端的图片上传,为了用户体验,用ajax交互,发现了FromData对象,这里有详细解释https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
以下直接粘贴代码,这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本。注:代码转自他人blog,感觉比本人代码清晰易懂,故而转之。
1、Html代码
<form id= "uploadForm">
<p >指定文件名: <input type="text" name="filename" value= ""/></p >
<p >上传文件: <input type="file" name="file"/></ p>
<input type="button" value="上传" onclick="doUpload()" />
</form>
2、JQuery代码
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}
使用FormData,进行Ajax请求并上传文件的更多相关文章
- H5 FormData对象的使用——进行Ajax请求并上传文件
XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- 请求与上传文件,Session简介,Restful API,Nodemon
作者 | Jeskson 来源 | 达达前端小酒馆 请求与上传文件 GET请求和POST请求 const express = require('express'); const app = expre ...
- Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- ajax无刷新上传文件
网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...
- HTML5+AJAX原生分块上传文件的关键参数设置
processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...
- Ajax 无刷新上传文件插件 uploadify 的使用
在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...
- ajax:html5上传文件,上传之前可以实现本地预览
本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...
- c#代码发送post请求,上传文件(并带其他参数)
本人对post理解不深,前段时间遇到一个需要用c#代码发送post请求上传文件的业务,于是参考了几篇帖子,加上自身实践写出了如下代码.写的比较low 望各位大大指正^_^. 业务需求: 对方给了一个接 ...
- ajax json用法 上传文件 登录
1. json json 是一种数据结构 跨平台跨语言 1. python中json数据的转换 1.数据类型 字符串 数字 布尔值 列表 字典 None 2. 序列化 ...
随机推荐
- 定义 ICache 接口,以及实现默认的 ASP.NET 缓存机制
本文定义 ICache 接口,以及实现默认的 ASP.NET 缓存机制(即通过 System.Web.Caching.Cache)来缓存,将来也可以通过扩展,替换默认实现. 下面直接贴代码了: ICa ...
- copy指定目录下包括子目录中所有的文件
#include <windows.h> #include <iostream> #include <string> using namespace std; DW ...
- QuickWebApi:使用Lambada方式,完成对WebApi的开发和调用。
QuickWebApi 目的:使用Lambada方式,完成对WebApi的开发和调用. 缘由:为了解耦服务和展现,将越来越多的使用WebApi提供各种服务:随着服务的细化,WebApi的接口将越来越多 ...
- C/C++基础知识总结——数据的共享与保护
1. 标识符的作用域与可见性 1.1 作用域 标识符的作用域包括:函数原型作用域.局部作用域.类作用域.命名空间作用域 (1) 函数原型作用域:函数的参与的作用域就是从函数的开始到结束 (2) 局部作 ...
- Sublime2 Text编辑器使用技巧
Sublime2 Text编辑器使用技巧 ------------------------------------软件使用----------------------------------- ...
- picker控件详解与使用,(实现省市的二级联动)
picker控件详解与使用,(实现省市的二级联动) 第一步:新建一个单视图(single view)的工程, 命名为pickerTest,不要勾选下面两个选项,第一个是新版本里面的,第二个是单元测试, ...
- MacOSX64位机器上gcc编译32位x264静态库
x264最新包地址:http://www.videolan.org/developers/x264.html 编译命令: ./configure --enable-static --host=i386 ...
- 详解android的号码匹配
什么是号码匹配,个人理解,即判断两组号码是否属于同一个号码.在实际使用过程中,接触到的号码会涉及到区号,国家编码以及IP号码等,这个时候就用到了号码匹配.两个内容不一样的号码,如+86***和1795 ...
- 【详细贴】Ubuntu Linode搭建海外策略路由VPN IPSec+L2TP(一)
对于码农来说,Google上搜索,stackoverflow上提问,twitter上交流,这样的国际化开放平台才是码农成长的空间.但是,目前遇到的一些现实的困难,无可避免的带来一些麻烦,不过这难不倒我 ...
- EL表达式学习
EL表达式取值 1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用 <%=request.getParameter("name")%& ...