图片上传(bootstrap做了很好的封装):
有兴趣的话可以看一下官网的demo：http://plugins.krajee.com/file-input-ajax-demo/4
- html页面引用文件上传js（fileinput.js），css（fileinput.css）
<!-- 引入jq,bootstrap -->
<!-- 图片上传即时预览插件 -->
<link rel="stylesheet" href="../js/bjs/fileinput.min.css">
<script type="text/javascript" src="../js/bjs/fileinput.min.js"></script>
<!-- 这个是汉化-->
<script type="text/javascript"src="../js/bjs/fileinput_locale_zh.js"></script>
2,加入标签：
下载bootstrap fileinput组件源码：
https://github.com/kartik-v/bootstrap-fileinput/
<input type="file" name="myfile" data-ref="url2" class="myfile" value="" />
<input type="hidden" name="url2" value="">
3,ajax
//视频图片上传
function eventInit0(){
//alert(1);
$(".myfile").fileinput({
//上传的地址
uploadUrl:"/ssm/video/uploadVideoFile",
uploadAsync : true, //默认异步上传
showUpload : false, //是否显示上传按钮,跟随文本框的那个
showRemove : false, //显示移除按钮,跟随文本框的那个
showCaption : true,//是否显示标题,就是那个文本框
showPreview : true, //是否显示预览,不写默认为true
dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount : 1, //表示允许同时上传的最大文件个数
enctype : 'multipart/form-data',
validateInitialCount : true,
previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
language : 'zh'
})
//异步上传返回结果处理
$('.myfile').on('fileerror', function(event, data, msg) {
//alert(data);
console.log("fileerror");
console.log(data);
});
//异步上传返回结果处理
$(".myfile").on("fileuploaded", function(event, data, previewId, index) {
videoImgUrl = "/file/videoImg/"+data.response.url;
//debugger
console.log("fileuploaded");
var ref = $(this).attr("data-ref");
$("input[name='" + ref + "']").val(data.response.url);
//debugger
});
//同步上传错误处理
$('.myfile').on('filebatchuploaderror', function(event, data, msg) {
console.log("filebatchuploaderror");
console.log(data);
});
//同步上传返回结果处理
$(".myfile").on("filebatchuploadsuccess",
function(event, data, previewId, index) {
console.log("filebatchuploadsuccess");
console.log(data);
});
//上传前
$('.myfile').on('filepreupload', function(event, data, previewId, index) {
console.log("filepreupload");
});
}
controller
/**
* @see 视频图片上传
* @author zyy
*/
@RequestMapping(value = {"video/uploadVideoFile"}, method = { RequestMethod.POST })
@ResponseBody
public Map<String, Object> uploadVideoFile(MultipartFile myfile)
throws IllegalStateException, IOException {
// 原始名称
String oldFileName = myfile.getOriginalFilename(); // 获取上传文件的原名
// 存储图片的虚拟本地路径（这里需要配置tomcat的web模块路径，双击猫进行配置）
String saveFilePath = "D://eclipse//workspace//ssmSources//videoImg";
// 上传图片
if (myfile != null && oldFileName != null && oldFileName.length() > 0) {
// 新的图片名称
//String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
//String newFileName = oldFileName.substring(oldFileName.lastIndexOf("."));
// 新图片
File newFile = new File(saveFilePath + "\\" + oldFileName);
// 将内存中的数据写入磁盘
myfile.transferTo(newFile);
// 将新图片名称返回到前端
Map<String, Object> map = new HashMap<String, Object>();
map.put("success", "成功啦");
map.put("url", oldFileName);
return map;
} else {
Map<String, Object> map = new HashMap<String, Object>();
map.put("error", "图片不合法");
return map;
}
}
文档上传：
<input type="file" id="testfile" name="pdfFileAddress" data-ref="Purl2" multiple />
<input type="hidden" name="Purl2" value="">
$('#testfile').fileinput({
language: 'zh',
uploadUrl: '/ssm/videoAddress/savePdfAddress',
showCaption: true,
showUpload: true,
showRemove: true,
showClose: true,
layoutTemplates:{
actionDelete: ''
},
browseClass: 'btn btn-primary'
});
//异步上传返回结果处理
$('#testfile').on('fileerror', function(event, data, msg) {
console.log("fileerror");
console.log(data);
});
//异步上传返回结果处理
$("#testfile").on("fileuploaded", function(event, data, previewId, index) {
//debugger
videopdfUrl = "/file/video/pdf/"+ data.response.url;
var ref = $(this).attr("data-ref");
$("input[name='" + ref + "']").val(data.response.url);
});
controller
/**
* @see 文档上传
* @author zyy
*/
@RequestMapping(value = {"videoAddress/savePdfAddress"}, method = { RequestMethod.POST })
@ResponseBody
public ModelMap savePdfAddress( @RequestParam("pdfFileAddress")MultipartFile pdfFileAddress,
HttpServletRequest request, HttpServletResponse response) {
ModelMap map = new ModelMap();
String paFileName = pdfFileAddress.getOriginalFilename();
String saveFilePath = "D://eclipse//workspace//ssmSources//video//pdf";
if (pdfFileAddress != null &&paFileName != null && paFileName.length() > 0) {
//try {
//FtpUtil ftpUtil = new FtpUtil();
//FTPClient ftp = ftpUtil.getConnectionFTP(UploadFileUrlUtil.HOST_NAEM, UploadFileUrlUtil.PORT,UploadFileUrlUtil.USER_NAME, UploadFileUrlUtil.PASSWORD);
//String filename = FtpUtil.getFileName(videoFileAddress);
//boolean bool = ftpUtil.uploadFile(ftp,UploadFileUrlUtil.GetPath(UploadFileUrlUtil.VIDEO_PATH) , filename,videoFileAddress.getInputStream());
// if (bool) {
//String url = saveFilePath + paFileName;
//map.put("videoAddress", url);
// map.put("videoName", paFileName);
//System.out.println("上传成功！");
// boolean boolClose = ftpUtil.closeFTP(ftp);
//if (boolClose) {
// System.out.println("关闭ftp连接成功！");
//} else {
// System.out.println("关闭ftp连接失败！");
//}
File newF = new File(saveFilePath + "\\" + paFileName);
//newFile。
// 将内存中的数据写入磁盘
try {
pdfFileAddress.transferTo(newF);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 将新图片名称返回到前端
//Map<String, Object> map = new HashMap<String, Object>();
map.put("success", "成功啦");
map.put("url", paFileName);
//return map;
} else {
System.out.println("上传失败！");
}
return map;
//} catch (Exception e1) {
// TODO Auto-generated catch block
// e1.printStackTrace();
// }
//return ReturnUtil.Success("加载成功", map, null);
}
视频上传
<input id="input-repl-3a" name="videoFileAddress" data-ref="url2" type="file" accept="mp4" />
<input type="hidden" name="url2" value="">
ajax.js
$("#input-repl-3a").fileinput({
dropZoneTitle : "请上传小于150M的视频！",
uploadUrl : "/ssm/videoAddress/saveVideoAddress",
language : "zh",
autoReplace : true,
showCaption : false,
showUpload : true,
overwriteInitial : true,
showUploadedThumbs : true,
//showPreview:false, //显示上传图片的大小信息
maxFileCount : 1,
minFileCount:1,
maxFileSize : 153600,//文件最大153600kb=150M
initialPreviewShowDelete : false,
showRemove : false,//是否显示删除按钮
showClose : false,
layoutTemplates : {
actionUpload:'',
},
allowedFileExtensions : [ "mp4","avi","dat","3gp","mov","rmvb"],
previewSettings : {
image : {
width : "100%",
height : "100%"
},
}
});
//异步上传返回结果处理
$('#input-repl-3a').on('fileerror', function(event, data, msg) {
console.log("fileerror");
console.log(data);
});
//异步上传返回结果处理
$("#input-repl-3a").on("fileuploaded", function(event, data, previewId, index) {
//debugger
videoUrl = "/file/video/videoAd/"+ data.response.url;
var ref = $(this).attr("data-ref");
$("input[name='" + ref + "']").val(data.response.url);
});
controller
/**
* @see 视频上传
* @author zyy
*/
@RequestMapping(value = {"videoAddress/saveVideoAddress"}, method = { RequestMethod.POST })
@ResponseBody
public ModelMap saveVideoAddress( MultipartFile videoFileAddress,
HttpServletRequest request, HttpServletResponse response) {
ModelMap map = new ModelMap();
String paFileName = videoFileAddress.getOriginalFilename();
String saveFilePath = "D://eclipse//workspace//ssmSources//video//videoAd";
if (videoFileAddress != null &&paFileName != null && paFileName.length() > 0) {
//try {
//FtpUtil ftpUtil = new FtpUtil();
//FTPClient ftp = ftpUtil.getConnectionFTP(UploadFileUrlUtil.HOST_NAEM, UploadFileUrlUtil.PORT,UploadFileUrlUtil.USER_NAME, UploadFileUrlUtil.PASSWORD);
//String filename = FtpUtil.getFileName(videoFileAddress);
//boolean bool = ftpUtil.uploadFile(ftp,UploadFileUrlUtil.GetPath(UploadFileUrlUtil.VIDEO_PATH) , filename,videoFileAddress.getInputStream());
// if (bool) {
//String url = saveFilePath + paFileName;
//map.put("videoAddress", url);
// map.put("videoName", paFileName);
//System.out.println("上传成功！");
// boolean boolClose = ftpUtil.closeFTP(ftp);
//if (boolClose) {
// System.out.println("关闭ftp连接成功！");
//} else {
// System.out.println("关闭ftp连接失败！");
//}
File newFile = new File(saveFilePath + "\\" + paFileName);
//newFile。
// 将内存中的数据写入磁盘
try {
videoFileAddress.transferTo(newFile);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 将新图片名称返回到前端
//Map<String, Object> map = new HashMap<String, Object>();
map.put("success", "成功啦");
map.put("url", paFileName);
//return map;
} else {
System.out.println("上传失败！");
}
return map;
//} catch (Exception e1) {
// TODO Auto-generated catch block
// e1.printStackTrace();
// }
//return ReturnUtil.Success("加载成功", map, null);
}
三种上传思想都是一样的。
扫一扫
6734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
