一,原理

详细原理请看这篇文章

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. SDN第二次上机作业

    作业链接 安装floodlight 生成拓扑并连接控制器floodlight,利用控制器floodlight查看图形拓扑 from mininet.topo import Topo class MyT ...

  2. MySQL操作中的一些细节及良好习惯--------持续更新中...

    1.尽量不要写太过复杂的SQL查询,不要想着非要一次性将结果全部以前端要求的形式返回出来,可以多次分开查询,这样逻辑清晰,问题解决速度快,方便维护,并且SQL的效率也高. 2.在使用联表查询的时候,关 ...

  3. socketlog的安装和使用

    socketlog的使用范围  socketlog比较适用于ajax调试和api的调试,经典应用莫不过于微信众多的api使用调试,使用socketlog可以很条理清楚的查看到api传递的参数,加载的性 ...

  4. memcached 的实践操作

    memcached安装和使用   yum install -y libevent  memcached  libmemcached   启动命令:   /etc/init.d/memcached st ...

  5. ps删除或覆盖内容

    除了选区删除.复制选区内容覆盖之外另外一种方法. 删掉字母"PS": 1. 矩形框选工具在字母上方画出选区 2. Ctrl+T,并拖拽底部以覆盖字母 3. 完成

  6. centos7下安装vsftpd

    安装步骤: 创建ftp目录 cd / mkdir ftpfile 创建指定登陆用户并不让他拥有登陆系统的权限(设置指定登陆shell) useradd ftpuser -d /ftpfile/ -s ...

  7. Linux 环境下程序不间断运行

    一.背景     在linux命令行中执行程序,程序通常会占用当前终端,如果不启动新的终端就没法执行其他操作.简单可以通过'&'将程序放到后台执行,但是这种方法有个问题就是,一旦连接远程服务器 ...

  8. C/C++语言简介之程序结构

    C语言的模块化程序结构用函数来实现,即将复杂的C程序分为若干模块,每个模块都编写成一个C函数,然后通过主函数调用函数及函数调用函数来实现一大型问题的C程序编写,因此常说:C程序=主函数+子函数.因此, ...

  9. js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”,你知道多少

    当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...

  10. 分布式缓存一致性hash算法理解

    今天阅读了一下大型网络技术架构这本苏中的分布式缓存一致性hash算法这一节,针对大型分布式系统来说,缓存在该系统中必不可少,分布式集群环境中,会出现添加缓存节点的需求,这样需要保障缓存服务器中对缓存的 ...