一个完整的springmvc + ajaxfileupload实现图片异步上传的案例
一,原理
详细原理请看这篇文章
二,案例讲解
2.1,html页面
<script type="text/javascript" src="${rc.contextPath}/js/ajaxfileupload.js"></script>
<input type="button" class="btn-upload bg-business-license" name="yushow" id="yushow" value="点击上传营业执照" onclick="uploadBtn();">
<input type="file" name="upload" style="display:none;" onchange="previewImg(this);" id="upload" accept="image/*"/>
function uploadImg(){
var url = '${rc.contextPath}/wxFfanApply.htm?method=UploadFile';
$.ajaxFileUpload({
url: url,
secureuri:false,
type: 'POST',
fileElementId:"upload",
dataType: 'json',
success: function (data, status) //服务器成功响应处理函数
{
var index = data.indexOf('{');
data= data.substring(index, data.length);
var obj = eval('(' + data + ')');
if ("000" == obj.code) {
$("#fssId").val(obj.fssId);
$("#originalFilename").val(obj.originalFilename);
/* alert(obj.fssId);
alert(obj.originalFilename); */
alert("上传成功");
} else {
alert("保存有问题,请重试");
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
});
}
2.2,java代码
public void UploadFile(HttpServletRequest request,
HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
String fssId=null;
String originalFilename=null;
try {
MultipartHttpServletRequest multipartRequest = null;
multipartRequest = (MultipartHttpServletRequest) request;
String fileElementId = request.getParameter("fileElementId");
if (StringUtils.isEmpty(fileElementId))
{
fileElementId = "upload";
}
MultipartFile inputFile = multipartRequest.getFile(fileElementId);
originalFilename = inputFile.getOriginalFilename();
fssId = FssFileClient.upload("app-weixin", inputFile);
if(StringUtils.isEmpty(fssId)&&StringUtils.isEmpty(originalFilename)){
result.put("code", "001");
result.put("fssId", "");
result.put("originalFilename", "");
super.toJson(result, response);
return;
}
} catch(Exception e) {
result.put("code", "002");
super.toJson(result, response);
}
result.put("code", "000");
result.put("fssId", fssId);
result.put("originalFilename", originalFilename);
super.toJson(result, response);
}
一个完整的springmvc + ajaxfileupload实现图片异步上传的案例的更多相关文章
- html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...
- Ajax图片异步上传并回显
1.jsp页面 <td width="20%" class="pn-flabel pn-flabel-h"></td> <td w ...
- ajax+XMLHttpRequest里的FormData实现图片异步上传
发这篇博客的时候我是自己在研究这个XMLHttpRequest请求,在别人的博客上面知道XMLHttpRequest新加了一个FormData的东西,好像现在APP请求后台也有用这种方式的吧. 别的不 ...
- asp.net使用jquery.form实现图片异步上传
首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files ...
- jquery 和 FormData 最简单图片异步上传
<script src="/scripts/jquery/jquery-3.1.1.min.js"></script> <script type=&q ...
- Android -- 图片异步上传到PHP服务器
背景 网上很多上传到 ...
- PHP JS JQ 异步上传并立即显示图片
提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > ...
- iOS分享 - AFNetworking之多图片/文件上传
在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
随机推荐
- BZOJ 3998: [TJOI2015]弦论 [后缀自动机 DP]
3998: [TJOI2015]弦论 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 2152 Solved: 716[Submit][Status] ...
- 【模板小程序】求M~N范围内的质数个数
/* 本程序说明: [编程题] 求素数 时间限制:2秒 空间限制:32768K 输入M.N,1 < M < N < 1000000,求区间[M,N]内的所有素数的个数.素数定义:除了 ...
- Microsoft Visual Studio 中出现 Windows has triggered a breakpoint in xxx.exe的一个解决方案
今天在用VS发布Release版本的过程中,碰到了一个问题,就是程序编译没有问题,但是在运行过程中出现了 根据经验,此类问题一般都是由于程序开发过程中的代码编写不规范导致内存写覆盖或者是使用了不同版本 ...
- gradle一个已删除的项目找不到
排查了已有模块未果,到.idea目录中找到了gradle.xml文件,发现其中externalProjectPath指向的正是报错的那个已删除项目,改之,刷gradle,解决.
- .NET图表控件(LightningChart )的用法
概述 LightningChart (LightningChart Ultimate) 软件开发工具包是微软Visual Studio 的一个插件,专攻大数据可视化呈现问题,用于 WPF(Window ...
- Go生成easyjson文件
[生成easyjson文件] cd services/api_adapter/aliafp #先删除已有的aliafp_easyjson.go文件,并且把除了aliafp.go以外的其他文件移动到 ...
- 安装php的memcached模块和扩展支持sasl
memcached的1.2.4及以上增加了CAS(Check and Set)协议,对于同一key的多进行程的并发处理问题.这种情况其实根数据库很像,如果同时有几个进程对同一个表的同一数据进行更新的话 ...
- 前端回答从输入URL到页面展示都经历了些什么
浏览器和服务器涉及大量网络通信内容,此处做了弱化介绍,作为前端主要关注第四部分.一. 网络环境保障我们先假定我们访问的URL为www.abc.com并且地址不在局域网内:首先我们所处的局域网的总路由应 ...
- Java采用内部构造器Builder模式进行对类进行构建
好处: 能保证重叠构造器模式的安全性: 能保证JAVABeans模式的可读性: package cn.lonecloud.builder; /** * 使用内部类构建器来对这个类进行构造 * @Tit ...
- Activiti中的log4j(slf4j)的配置
今天试了一下在Activiti中使用log4j来进行配置发现这个会出现问题,其实Activiti中的日志系统是采用的是slf4j而不是log4j 然后使用slf4j驱动log4j来做的 通过Proce ...