本文介绍如何使用Grails框架和Uploadify组件实现文件上传功能。通过创建Grails项目并集成Uploadify v2.1.4，实现了多文件上传、预览及进度显示等功能。
参考了这篇the script is not working for any mvc framework中uri的回复，结合当前Uploadify的v2.1.4版，netbean 6.9.1下编写调试。
● 新建grails工程，名为test，并把Uploadify-v2.1.4.zip解压到web-app\uploadify目录下。
● 新建grails控制器PictureController，代码如下
| package com.test
class PictureController {
def index = { redirect(action: "upload") }
def upload = { }
def savePicture = { def files = request.getFileMap(); def path = "c:/test/" + files.get("Filedata").getOriginalFilename(); files.get("Filedata").transferTo( new File(path)) render (view:'upload') } } |
● 新建grails视图upload.gsp，代码如下，注意粗体部分的上下文路径
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>upload file sample</title> <link rel="stylesheet" href="/test/uploadify/uploadify.css" type="text/css" /> <script type="text/javascript" src="/test/uploadify/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/test/uploadify/swfobject.js"></script> <script type="text/javascript" src="/test/uploadify/jquery.uploadify.v2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#fileUpload").uploadify({ 'uploader': '/test/uploadify/uploadify.swf', 'cancelImg': '/test/uploadify/cancel.png', 'script': '/test/picture/savePicture', 'folder': 'files', 'multi': true, 'buttonText': 'add', 'displayData': 'speed', 'simUploadLimit': 2 }); }); </script> </head> <body> <hr width=100% size="1" color="" align="center"> <h2>Multiple File Upload</h2> <p>checkScript, buttonText, simulataneous upload limit</p> <div id="fileUpload">You have a problem with your javascript</div> <a href="javascript:$('#fileUpload').uploadifyUpload()">Start Upload</a> | <a href="javascript:$('#fileUpload').uploadifyClearQueue()">Clear Queue</a> <p></p> </body> </html> |
● 运行工程，访问http://localhost:8080/test/picture/upload
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
