国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > php开源 > 综合技术 > JQuery Uploadify3.2 + SpringMVC 文件上传

JQuery Uploadify3.2 + SpringMVC 文件上传

来源:程序员人生   发布时间:2015-03-09 08:17:01 阅读次数:2821次

1.引入头文件(jQuery放前面,而且不能有多个JQuery)

<script type="text/javascript" src="js/jquery⑴.6.2.js"></script> <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css"> <script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script> </head> <script > $(document).ready(function() { $("#file_upload").uploadify({ 'buttonText' : '请选择', //上传按钮显示内容,还有个属性可以设置按钮的背景图片 'height' : 30, 'swf' : 'js/uploadify/uploadify.swf', // 控件flash文件位置 'uploader' : 'test/uploadFile.do', // 后台处理的要求地址,后面追加了jsessionid,用来标示使用当前session(默许是打开新的session,会致使存在session校验的要求中产生302毛病) // 'upload.action;jsessionid=<%=session.getId() %>', // 'upload.action ;jsessionid=${pageContext.session.id}, 'cancelImg' : 'js/uploadify/uploadify-cancel.png', 'width' : 120, 'fileSizeLimit' : '1000KB', 'multi' : false, // true 选择多文件上传 'auto':false, // true自动上传 'fileObjName' : 'file', //文件对象名称,用于后台获得文件对象时使用,详见下面的java代码 'fileTypeExts' : '*.jpg;*.png;*.xls', //控制可上传文件的扩大名,启用本项时需同时声明fileDesc // 'overrideEvents' : ['onDialogClose'], //不履行默许的onSelect事件 // 'queueID':'file_upload', //文件选择后的容器ID,与下面HTML的div.id对应 // 'fileObjName':'myFile',//服务器端脚本使用的文件对象的名称 $_FILES个['upload'] // 'buttonImage':'${pageContext.request.contextPath}/js/jquery.uploadify/uploadify-cancel.png', //阅读按钮的背景图片路径 // 'width':'100', //阅读按钮的宽度 // 'height':'32', //阅读按钮的高度 'onFallback' : function() {//检测FLASH失败调用 alert("您未安装FLASH控件,没法上传图片!请安装FLASH控件后再试。"); }, 'onUploadSuccess' : function(file, data, response) { alert( file.name + ' 上传成功! '); var obj = eval('('+data+')'); alert(obj.message); // $('#showUploadMsg').html(obj.message); } }); }); </script>
其他事件可以查询在线api 地址:  http://www.uploadify.com/documentation/
2. 上传按钮

<body> <input type="file" name="fileName" id="file_upload" /> <a href="javascript:$('#file_upload').uploadify('upload', '*')">上传文件</a> | <a href="javascript:$('#file_upload').uploadify('stop')">停止上传!</a> </body>

3. 后台处理

@RequestMapping(value = "/uploadFile.do", method = RequestMethod.POST) public String uploadFile(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletResponse response) throws IOException { // System.out.println(file.getOriginalFilename()); System.out.println("成功!"); String message = "测试测试"; response.setCharacterEncoding("UTF⑻"); response.getWriter().write("{"message":"" + message + ""}"); response.getWriter().flush(); return "jsp/index"; }
下载/资料:

Uploadify官方网站:http://www.uploadify.com/

Uploadify下载:http://download.csdn.net/detail/leixiaohua1020/6376463

demo:链接:http://pan.baidu.com/s/1jGsv4Gm 密码:gcw4

jar : 链接:http://pan.baidu.com/s/1AmNgU 密码:8qn9

手册:链接:http://pan.baidu.com/s/1pJBikCr 密码:or37



生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生