一个ajax实现表单上传文件的神器 formdata
通过传统的form表单提交的方式上传文件:
- $.ajax({
- url : "http://localhost:8080/STS/rest/user",
- type : "POST",
- data : $( '#postForm').serialize(),
- success : function(data) {
- $( '#serverResponse').html(data);
- },
- error : function(data) {
- $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
- }
- });
- 如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。
下面为jsp代码
- <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>
下面为js代码
- 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);
- }
- });
- }
可以轻松实现上传。
一下为我自己写的实例,已经过亲身验证:
function doCheck(){
var formData = new FormData($( "#upfile" )[0]);
$.ajax({
type:"POST",
url: "${ctx}/user/returnRowsNum",
data:formData,
async:false,
cache: false,
contentType: false,
processData: false,
success:function(data){
if(data){
var numb = data.num
var ti = 20*numb/900
alert(data.num);
alert(numb+"条数据,预计耗时"+ti.toFixed(1)+"分钟,期间请勿操作页面,闹心等待")
}
}
});
}
jsp代码:
<form name="upfile" id="upfile" method="post" enctype="multipart/form-data" onsubmit="return checkSub()" action="${ctx}/user/importUser?1=1" >
<input type="hidden" name="path" id="path" value=""/>
<input type="hidden" name="orgId" id="orgId" value="${orgId}"/>
<div id="mainwindowhidden">
<div class="suggestion">
<span class="sugicon"><span class="strong colorgorning2">当前操作提示:</span><span class="padding-left5 colorgorningage">上传文件格式为xls,单次导入用户数不能大于1000条。</span></span>
</div>
<div class="sugtitle-line"></div>
<div class="formdiv" >
<table border="0" width="100%">
<tr class="trstyle2">
<td class="trtitle01" width="20%"><span class="requiredLabelClass">*</span> 选择文件</td>
<td class="trtitle02" width="80%"><input type="file" name="upfilepath" value="" maxlength="200" size="50" class="infoInput"></td>
</tr>
</table>
</div>
</div>
<div id="downbotton">
<div id="subbotton">
<table border="0" width="100%">
<tr id="bottonsubmit">
<td id="right"><input type="submit" name="Submit" id="submitbotton" onClick="doCheck()" value="确认上传1" class="buttonface" title="确认上传"/></td>
<td id="left" class="padding-left5"><input type="reset" name="reset" onClick="javascript:cancelUpload();" id="release" value="取消上传" class="buttonface" title="取消上传" /></td>
</tr>
</table>
</div>
</div>
</form>
一个ajax实现表单上传文件的神器 formdata的更多相关文章
- 巨蟒python全栈开发django11:ajax&&form表单上传文件contentType
回顾: 什么是异步? 可以开出一个线程,我发出请求,不用等待返回,可以做其他事情. 什么是同步? 同步就是,我发送出了一个请求,需要等待返回给我信息,我才可以操作其他事情. 局部刷新是什么? 通过jq ...
- 通过ajax提交表单上传文件
//这是看的大神的.//原地址:https://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html $("#sub" ...
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- 使用form表单上传文件
在使用form表单上传文件时候,input[type='file']是必然会用的,其中有一些小坑需要避免. 1.form的 enctype="multipart/form-data" ...
- JsonResponse类的使用、form表单上传文件补充、CBV和FBV、HTML的模板语法之传值与过滤器
昨日内容回顾 Django请求生命周期 # 1.浏览器发起请求 到达Django的socket服务端(web服务网关接口) 01 wsgiref 02 uwsgi + nginx 03 WSGI协议 ...
- Express下使用formidable实现POST表单上传文件并保存
Express下使用formidable实现POST表单上传文件并保存 在上一篇文章中使用formidable实现了上传文件,但没将它保存下来. 一开始,我也以为是只得到了文件的相关信息,需要用fs. ...
- from 表单上传文件和下载?
from表单上传单个文件的方法. 分为三个部分,简单演示. 一部分 表单上传文件 <%-- Created by IntelliJ IDEA. User: Administrator Date: ...
- java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例
java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
- vue form表单上传文件
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js">< ...
随机推荐
- ural 1215 Exactness of Projectile Hit
#include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...
- JavsScript中的Document对象
Document对象的属性 alinkColor,linkColor,vlinkColor:这些属性描述了超链接的颜色.linkColor指未访问过的链接的正常颜色,vlinkColor指访问过的链接 ...
- 如何统一修改 Altium Designer 中的字符大小
如下图 1 所示: Q1. Q2. C1. C2. R1 等等的字符你想统一修改他们的大小.原来是 Text Height( 100mil), Text Width( 12mil),想改成 Text ...
- 五个新知识:微软SHA2补丁,亚信专业工具,微软官方文档,使用过期签名(附官方推荐链接),注意使用具有UAC的CMD
五个新知识:微软SHA2补丁,亚信专业工具,微软官方文档,使用过期签名 不支持SHA2算法的计算机更新补丁:https://technet.microsoft.com/zh-CN/library/se ...
- SmartBusinessDevFramework架构设计-1:结构简介
SmartBusinessDevFramework 简介 基于.net 4.0 开发的企业级系统框架 功能 1 自定义ORM.如果客官喜欢NHibernate EntityFramework ,并对其 ...
- 如何获取一个AlertDialog中的EditText中输入的内容
怎么获取一个AlertDialog中的EditText中输入的内容? new AlertDialog.Builder(this) .setTitle("请输入") .set ...
- HDU_1241——石油探索DFS
Problem Description The GeoSurvComp geologic survey company is responsible for detecting underground ...
- UVa 116: Undirectional TSP
简单动态规划题.用取模实现第一行与最后一行连续,注意取字典序即可. 我的解题代码如下: #include <iostream> #include <cstdio> #inclu ...
- 组播MAC地址转换关系及唯一性处理
组播地址与其对应的组播MAC换算关系如下: 组播MAC=组播MAC标识+组播IP后23位对应的二进制位(32位的IP地址取后23位导致32组IP地址对应的多播IP相同) (IANA把01:00:5 ...
- WIN7局域网文件共享设置方法
WIN7局域网文件共享设置方法 工具/原料 两台电脑以上的局域网.WIN7操作系统 步骤/方法 1 右击桌面网络----属性----更改高级共享设置 (注释:查看当前网络 比如:家庭网络.公共网络 等 ...