Jfinal+Jquery uploadify实现多文件上传实例
包文件
外部jar包
jfinal-2.0-bin-with-src.jar（JFinal核心包）
fastjson-1.2.7.jar（用于json数据的处理）
cos-26Dec2008.jar（支持JFinal自带的上传功能）
1. 引入 css，js外部文件
<link id="bscss" href="${root}/bootstrap/css/bootstrap.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${root!}/uploadify/uploadify.css">
<link rel="stylesheet" type="text/css"
href="${root!}/webUploader/style.css"><!--从官网下载的实例中有 -->
<script src="${root!}/resource/front/js/jquery-1.9.1.min.js"
type="text/javascript"></script>
<script src="${root!}/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<script src="${root}/bootstrap/js/bootstrap.js" type="text/javascript"></script>2.页面部分
用来放置webuploader的dom
<form enctype="multipart/form-data" method="post"> <input type="file" id="file_upload" width="400px" > </form> <br> <ul id="url" style="padding-left: 100px"></ul>
3.JS部分， 初始化webuploader组件，设置上传等事件监听。
$(function() {
//上传附件
$('#file_upload').uploadify(
{
//校验数据
'swf' : '${root!}/uploadify/uploadify.swf', //指定上传控件的主体文件，默认‘uploader.swf’
'uploader' : '${root!}/front/complain/uploads/${cid}', //指定服务器端上传处理文件，默认‘upload.php’
'auto' : true, //手动上传
'buttonImage' : '${root!}/uploadify/uploadify-browse.png', //浏览按钮背景图片
'multi' : false, //单文件上传
'method' : 'post',
//'fileTypeExts' : '*.gif; *.jpg; *.png; *.flv;*.avi;*.mp4;*.mp3;txt;zip;doc;zip', //允许上传的文件后缀
'fileSizeLimit' : '300MB', //上传文件的大小限制，单位为B, KB, MB, 或 GB
'successTimeout' : 35, //成功等待时间
'onUploadSuccess' : function(file, data,
response) {//每成功完成一次文件上传时触发一次t
var image=eval("["+data+"]")[0];
$('#url').append(
"<li> "+image.fileName+"</a> </li><br/>");
//var image=eval(data);
//alert(image[0]["big"]);<span ><a href='${root!}/uploadify/delete/'+image.fileName>删除</a><span>
},
'onUploadError' : function(file, data, response) {//当上传返回错误时触发
$('#url').append("<li>" + data + "</li>");
}
});
});4. 后台部分,获取文件
public class ComplainAddController extends Controller{
/**
* 上传附件
*/
public void uploads() {
String uuid = getPara();
// 上传代码
UploadFile uf = getFile("Filedata","comFile");
//获得到了端口
String url ="/upload/comFile/"+uf.getFileName();
String fileName=uf.getFileName();
ComplainFile comFile = new ComplainFile();
comFile.setCaseId(uuid);
comFile.setUrl(url);
comFile.setName(fileName);
comFile.setSuffiix(fileName.split("\\.")[1]);
comFile.save();
setAttr("fileName",fileName);
setAttr("uuid",uuid);
renderJson();
}
}效果：
不过此方法不支持手机端，若电脑端和手机端兼可用，可使用百度WebUploader插件，请参考
Jfinal +百度WebUploader组件实现多图片上传
本文原创，转载必追究版权。
