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



思路:

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

思路:

1、前端界面一个input标签,使用ajaxFileupload.js实现对文件的上传。

2、后台接收所有文件,保存到一个独一无二的文件夹中

3、遍历该文件夹里面的所有文件,获取他们的名字,存入数据库!

具体代码如下:

前端界面:

  1. <!-- 上传 -->  
  2. <input type="file" name="uploadfile" id="uploadfile" multiple="multiple">  
  3. 监测点id:<input type="text" id="monPointId"><br>  
  4. 描述:<input type="text" id="description"><br>  
  5. 拍摄地点:<input type="text" id="location"><br>  
  6. <button id="upload" type="button" onclick="return false;">上传</button>  
  7. <!-- 上传js文件,放到最后加载 -->  
  8. <script type="text/javascript" src="${contextPath}/resources/js/jquery-1.11.1.js"></script>  
  9. <script type="text/javascript" src="${contextPath}/resources/js/ajaxfileupload.js"></script>  
  10. <script type="text/javascript" src="${contextPath}/resources/js/upload.js"></script>  
<!-- 上传 -->
<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" οnclick="return false;">上传</button>
<!-- 上传js文件,放到最后加载 -->
<script type="text/javascript" src="${contextPath}/resources/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/upload.js"></script>

js:

  1. $(document).ready(function() {  
  2.     $('#upload').click(function() {  
  3.         upload();     
  4.     });  
  5. });  
  6. function upload() {  
  7.     var monPointId=$("#monPointId").val();  
  8.     var description=$("#description").val();  
  9.     var location=$("#location").val();  
  10.     $.ajaxFileUpload({  
  11.         url : '/upload?monPointId='+monPointId+'&description='+description+'&location='+location,   //提交的路径  
  12.         type: 'post',  
  13.         secureuri : false, // 是否启用安全提交,默认为false  
  14.         fileElementId : 'uploadfile', // file控件id  
  15.         dataType : 'json',  
  16.         data:{  
  17.             'monPointId' : monPointId,  
  18.             'description' : monPointId,  
  19.             'location' : monPointId,  
  20.         },  
  21.         success : function(data, status) {  
  22.             console.log("aa");  
  23.             console.log(data);  
  24.             console.log(status);  
  25.         },  
  26.         error : function(data, status) {  
  27.             alert("上传失败");  
  28.         }  
  29.     });  
  30. }  
$(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("上传失败");
		}
	});
}

后台:

  1. /**  
  2.  * 多视频文件上传  
  3.  */  
  4. @SuppressWarnings("unchecked")  
  5. public void upload(){  
  6.     String dirName=CommonUtils.getCurrentTime();  
  7.     String contextPath = PathKit.getWebRootPath();  
  8.     String path = "/upload/video/" +dirName;  
  9.     String pathUrl = contextPath + path;  
  10.     Map<String,Object> map=new LinkedHashMap<String, Object>();  
  11.     try {  
  12.         List<UploadFile> uploadFile = getFiles("video/"+dirName);//在磁盘上保存文件  
  13.         System.out.println(uploadFile.size());  
  14.         String monPointId=getPara("monPointId");  
  15.         String description=new String(getPara("description").getBytes("iso-8859-1"),"utf-8");//乱码控制  
  16.         String location=new String(getPara("location").getBytes("iso-8859-1"),"utf-8");  
  17.         SensorService service=new SensorService();  
  18.         map=(Map<String, Object>) service.uploadVideo(uploadFile, dirName, path,pathUrl, monPointId, description, location);  
  19.     } catch (Exception e) {  
  20.         e.printStackTrace();  
  21.         map.put("status", false);  
  22.         map.put("msg", "服务器异常!");  
  23.         ExcelImportUtil.deleteDir(new File(pathUrl));  
  24.     }  
  25.     System.out.println(map);  
  26.     renderJson(map);  
  27. }  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值