前段时间做了个手机端的图片上传,为了用户体验,用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请求并上传文件的更多相关文章

  1. H5 FormData对象的使用——进行Ajax请求并上传文件

    XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...

  2. 请求与上传文件,Session简介,Restful API,Nodemon

    作者 | Jeskson 来源 | 达达前端小酒馆 请求与上传文件 GET请求和POST请求 const express = require('express'); const app = expre ...

  3. Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  4. ajax无刷新上传文件

    网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...

  5. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  6. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  7. ajax:html5上传文件,上传之前可以实现本地预览

    本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...

  8. c#代码发送post请求,上传文件(并带其他参数)

    本人对post理解不深,前段时间遇到一个需要用c#代码发送post请求上传文件的业务,于是参考了几篇帖子,加上自身实践写出了如下代码.写的比较low 望各位大大指正^_^. 业务需求: 对方给了一个接 ...

  9. ajax json用法 上传文件 登录

     1. json  json  是一种数据结构  跨平台跨语言   1. python中json数据的转换   1.数据类型    字符串 数字 布尔值 列表 字典 None       2. 序列化 ...

随机推荐

  1. 定义 ICache 接口,以及实现默认的 ASP.NET 缓存机制

    本文定义 ICache 接口,以及实现默认的 ASP.NET 缓存机制(即通过 System.Web.Caching.Cache)来缓存,将来也可以通过扩展,替换默认实现. 下面直接贴代码了: ICa ...

  2. copy指定目录下包括子目录中所有的文件

    #include <windows.h> #include <iostream> #include <string> using namespace std; DW ...

  3. QuickWebApi:使用Lambada方式,完成对WebApi的开发和调用。

    QuickWebApi 目的:使用Lambada方式,完成对WebApi的开发和调用. 缘由:为了解耦服务和展现,将越来越多的使用WebApi提供各种服务:随着服务的细化,WebApi的接口将越来越多 ...

  4. C/C++基础知识总结——数据的共享与保护

    1. 标识符的作用域与可见性 1.1 作用域 标识符的作用域包括:函数原型作用域.局部作用域.类作用域.命名空间作用域 (1) 函数原型作用域:函数的参与的作用域就是从函数的开始到结束 (2) 局部作 ...

  5. Sublime2 Text编辑器使用技巧

        Sublime2 Text编辑器使用技巧 ------------------------------------软件使用----------------------------------- ...

  6. picker控件详解与使用,(实现省市的二级联动)

    picker控件详解与使用,(实现省市的二级联动) 第一步:新建一个单视图(single view)的工程, 命名为pickerTest,不要勾选下面两个选项,第一个是新版本里面的,第二个是单元测试, ...

  7. MacOSX64位机器上gcc编译32位x264静态库

    x264最新包地址:http://www.videolan.org/developers/x264.html 编译命令: ./configure --enable-static --host=i386 ...

  8. 详解android的号码匹配

    什么是号码匹配,个人理解,即判断两组号码是否属于同一个号码.在实际使用过程中,接触到的号码会涉及到区号,国家编码以及IP号码等,这个时候就用到了号码匹配.两个内容不一样的号码,如+86***和1795 ...

  9. 【详细贴】Ubuntu Linode搭建海外策略路由VPN IPSec+L2TP(一)

    对于码农来说,Google上搜索,stackoverflow上提问,twitter上交流,这样的国际化开放平台才是码农成长的空间.但是,目前遇到的一些现实的困难,无可避免的带来一些麻烦,不过这难不倒我 ...

  10. EL表达式学习

    EL表达式取值 1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用 <%=request.getParameter("name")%& ...