一,原理

详细原理请看这篇文章

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. Does Java pass by reference or pass by value?(Java是值传递还是引用传递) - 总结

    这个话题一直是Java程序员的一个热议话题,争论不断,但是不论是你百度搜也好还是去看官方的文档中所标明的也好,得到的都只有一个结论:Java只有值传递. 在这里就不贴代码细致解释了,让我们来看看一些论 ...

  2. Orleans例子源码

    这是Orleans系列文章中的一篇.首篇文章在此 我共享以下我现在写教程的简单的Orleans例子源码. 这个代码已经是我为了写word改动过了的.不过大体内容是通用的. 我写博客总体想法是:去除所有 ...

  3. 简单认识一下什么是vue-router

    什么是vue-router? 用通俗一点的话来讲,其实就是一个url和组件之间的映射关系,当我们访问不同的url的时候在页面渲染不同的组件 vue-router怎么用? vue-router作为一个v ...

  4. Leetcode刷题C#版之 Median of Two Sorted Arrays

    题目: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...

  5. 获取网站证书的两种方法(wireshark or firefox nightly)

    一.使用Wireshark 截取数据包的方式 1. wireshark软件需要使用管理员权限运行,开始捕获后,按下ctrl + f,查找证书所在分组,从source 和destination 栏可以看 ...

  6. hplus--H+ V2.3 (中文版)

    一个高大上的后台模板 演示地址 http://www.zi-han.net/theme/hplus/?v=4.1 下载地址 http://download.csdn.net/detail/u01197 ...

  7. Python 脚本实现对 Linux 服务器的监控

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 原文地址 由于原文来自微信公众号,并且脚本都是图片,所以这里 ...

  8. 高并发关于微博、秒杀抢单等应用场景在PHP环境下结合Redis队列延迟入库

    第一步:创建模拟数据表. CREATE TABLE `test_table` ( `id` int(11) NOT NULL AUTO_INCREMENT, `uid` int(11) NOT NUL ...

  9. 第十八章 DjangoWeb开发框架

    第十八章 DjangoWeb开发框架 第一课 内容概要: 1.JS正则 -登录注册验证 2.组件 1.BootStrap -css -js 学习BootStrap规则 2.jQueryUI -css ...

  10. 【Learning】 莫比乌斯反演

    莫比乌斯反演 ​ 对于两个定义域为非负整数的函数\(F(n)\)和\(f(n)\) ​ 若满足:\(F(n)=\sum\limits_{d|n}f(d)\),则反演得到\(f(n)=\sum\limi ...