Jfinal框架下结合ajaxFileupload实现多文件上传

demo下载

距离写代码时间有点长了，没有及时总结，现在忘得差不多了。不过大概思路还在，也是有点参考价值的！

由于jfinal框架自身的问题，在实现多文件上传时很难获取所有文件的名字，只能获取到一个input标签里面的名字而已，重写框架是最佳的方法，但是对于初学者而言十分艰难，所以我这里介绍另一种解决思路吧！

思路：
1、前端界面一个input标签，使用ajaxFileupload.js实现对文件的上传。
2、后台接收所有文件，保存到一个独一无二的文件夹中
3、遍历该文件夹里面的所有文件，获取他们的名字，存入数据库！

具体代码如下：
前端界面：

<!-- 上传 -->  
<input type="file" name="uploadfile" id="uploadfile" multiple="multiple">  
监测点id：<input type="text" id="monPointId"><br>  
描述：<input type="text" id="description"><br>  
拍摄地点：<input type="text" id="location"><br>  
<button id="upload" type="button" onclick="return false;">上传</button>  
<!-- 上传js文件,放到最后加载 -->  
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${contextPath}/resources/js/jquery-1.11.1.js"></script>  
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${contextPath}/resources/js/ajaxfileupload.js"></script>  
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="${contextPath}/resources/js/upload.js"></script>  

js:

$(document).ready(function() {
    $('#upload').click(function() {
        upload();   
    });
});
function upload() {
    var monPointId=$("#monPointId").val();
    var description=$("#description").val();
    var location=$("#location").val();
    $.ajaxFileUpload({
        url : '/upload?monPointId='+monPointId+'&description='+description+'&location='+location,   //提交的路径
        type: 'post',
        secureuri : false, // 是否启用安全提交，默认为false
        fileElementId : 'uploadfile', // file控件id
        dataType : 'json',
        data:{
            'monPointId' : monPointId,
            'description' : monPointId,
            'location' : monPointId,
        },
        success : function(data, status) {
            console.log("aa");
            console.log(data);
            console.log(status);
        },
        error : function(data, status) {
            alert("上传失败");
        }
    });
}

后台：

    /**
     * 多视频文件上传
     */
    @SuppressWarnings("unchecked")
    public void upload(){
        String dirName=CommonUtils.getCurrentTime();
        String contextPath = PathKit.getWebRootPath();
        String path = "/upload/video/" +dirName;
        String pathUrl = contextPath + path;
        Map<String,Object> map=new LinkedHashMap<String, Object>();
        try {
            List<UploadFile> uploadFile = getFiles("video/"+dirName);//在磁盘上保存文件
            System.out.println(uploadFile.size());
            String monPointId=getPara("monPointId");
            String description=new String(getPara("description").getBytes("iso-8859-1"),"utf-8");//乱码控制
            String location=new String(getPara("location").getBytes("iso-8859-1"),"utf-8");
            SensorService service=new SensorService();
            map=(Map<String, Object>) service.uploadVideo(uploadFile, dirName, path,pathUrl, monPointId, description, location);
        } catch (Exception e) {
            e.printStackTrace();
            map.put("status", false);
            map.put("msg", "服务器异常！");
            ExcelImportUtil.deleteDir(new File(pathUrl));
        }
        System.out.println(map);
        renderJson(map);
    }