http://wdwheyr.iteye.com/blog/1992158
之前做过uploadify 2.x的文件上传,做这个项目的时候发现官网现在版本是3.2.1于是就做了一个demo。
前台代码如下(注意引入jquery):
- <!DOCTYPE HTML >
- <html>
- <head>
- <title>文件上传</title>
- <%@include file="comm/comm.jsp" %>
- <link rel="stylesheet" type="text/css" href="css/uploadify.css">
- <script type="text/javascript" src="js/jquery.uploadify.min.js"></script>
- <script >
- $(document).ready(function() {
- $("#file_upload").uploadify({
- 'buttonText' : '请选择', //按钮显示的文字
- 'height' : 30, //按钮的高
- 'swf' : '/auth/js/uploadify.swf',
- 'uploader' : '/auth/uploadFile.html', //post请求的地址
- 'width' : 120, //按钮的长
- 'auto':false,
- 'fileObjName' : 'file', //file对象的名字,相当于id="file"
-
'fileTypeExts' : '*.jpg; *.png; *.JPG ; *.PNG', //限定上传文件的类型
- 'onUploadSuccess' : function(file, data, response) {
- alert( file.name + ' 上传成功! ');
- }
- });
- });
- </script>
- </head>
- <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>
- </html>
后台代码如下:
-
@ResponseBody //返回的是字符串,不能是view,所以要加这个标签
- @RequestMapping(value="/uploadFile",method=RequestMethod.POST)
- public void uploadFile(HttpServletResponse response,HttpServletRequest request,@RequestParam(value="file", required=false) MultipartFile file) throws IOException{
- byte[] bytes = file.getBytes();
- System.out.println(file.getOriginalFilename());
- String uploadDir = request.getRealPath("/")+"upload";
- File dirPath = new File(uploadDir);
- if (!dirPath.exists()) {
- dirPath.mkdirs();
- }
- String sep = System.getProperty("file.separator");
- File uploadedFile = new File(uploadDir + sep
- + file.getOriginalFilename());
- FileCopyUtils.copy(bytes, uploadedFile);
- msg = "true";
- response.getWriter().write(msg);
- }