一,原理

详细原理请看这篇文章

springmvc + ajaxfileupload解决ajax不能异步上传图片的问题。java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

二,案例讲解

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实现图片异步上传的案例的更多相关文章

  1. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  2. Ajax图片异步上传并回显

    1.jsp页面 <td width="20%" class="pn-flabel pn-flabel-h"></td> <td w ...

  3. ajax+XMLHttpRequest里的FormData实现图片异步上传

    发这篇博客的时候我是自己在研究这个XMLHttpRequest请求,在别人的博客上面知道XMLHttpRequest新加了一个FormData的东西,好像现在APP请求后台也有用这种方式的吧. 别的不 ...

  4. asp.net使用jquery.form实现图片异步上传

    首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files ...

  5. jquery 和 FormData 最简单图片异步上传

    <script src="/scripts/jquery/jquery-3.1.1.min.js"></script> <script type=&q ...

  6. Android -- 图片异步上传到PHP服务器

    背景                                                                                           网上很多上传到 ...

  7. PHP JS JQ 异步上传并立即显示图片

    提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > ...

  8. iOS分享 - AFNetworking之多图片/文件上传

    在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...

  9. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

随机推荐

  1. HDU 4315 Climbing the Hill [阶梯Nim]

    传送门 题意: 和上题基本一样:山顶可以有多人,谁先把king放到山顶谁就胜 并不太明白 #include <iostream> #include <cstdio> #incl ...

  2. (python功能定制)复杂的xml文件对比,产生HTML展示区别

    功能的设计初衷: 处理复杂的xml对比,屏蔽同节点先后顺序的影响 主要涉及知识点: 1.xml解析 ------- ElementTree库 2.文件比对差别 ------- difflib库 3.获 ...

  3. Animation Physics and The Realization Of Animation In Browsers

    Animation Physics Background With the development of computer science technology, people are facing ...

  4. Windows Server 2016-Powershell迁移FSMO角色

    上一章节我们讲到了通过Ntdsutil命令行进行FSMO角色迁移,本章开始之前我们先讨论一下有关FSMO角色放置建议: 建议将架构主机角色(Schema Master)和域命名主机角色(Domain ...

  5. u-boot核心初始化

    异常向量表:异常:因为内部或者外部的一些事件,导致处理器停下正在处理的工作,转而去处理这些发生的事件.ARM Architecture Reference Manual p54页.7种异常的类型:Re ...

  6. Qt滑动条设计与实现

    没有找到Qt的滑动条控件,所以自己写了一个,能够实现亮度调节.音量调节等功能. 效果如下图: 主要设计思路: 有些调节功能如对比度是有负值的,所以需要能对滑动条的数值范围进行设置,不局限于0~100 ...

  7. [Python Study Notes]实现对鼠标控制

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  8. Centos 6.9--配置python3.5

    安装python3.5可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlit ...

  9. Maven中避开测试环节

    两种方法 修改pom文件 添加<skipTests>true</skipTests>标签 <plugin> <groupId>org.apache.ma ...

  10. mysql cp复制和mysqldump备份测试

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 备份策略 针对不同的场景下, 我们应该制定不同的备份策略对数据库进行 ...