Jfinal+Jquery uploadify实现多文件上传实例

访客9年前 (2017-05-16)Jfinal4386

包文件

外部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();
    }
}

效果：