思路:
由于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" 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>
<!-- 上传 -->
<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:
- $(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("上传失败");
- }
- });
- }
$(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);
- }