效果:
上传图片前:
上传图片后:
html:
<div class="form-group">
<label class="control-label col-sm-4" for="pic">分类图标:</label>
<div class="col-sm-6 upimg-div">
<div class="close-upimg"></div>
<img src="/resources/img/room/upload.png" class="add-img">
<input type="file" class="file" id="file" name="file" value="" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="selectImage(this);"/>
<input type="hidden" id="pic" name="pic" value="">
</div>
</div>
css:
.add-img{height: 150px;width: 150px;z-index:10;}
.upimg-div .file{
height: 100%;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
}
.close-upimg {
position: relative;
top: 5px;
left: 150px;
background-image: url(/resources/img/room/del.png);
height: 30px;
width: 30px;
background-repeat: no-repeat;
float: left;
visibility: hidden;
z-index:100;
}
js:
$(document).ready(
$(function() {
if ($("#add-img")[0]) {
var src = $("#add-img")[0].src;
console.log(src);
// 当图片为上传图片时,不显示X
if (src.toString().indexOf("upload.png") == -1) {
var closeUpimg = $(".close-upimg").attr("style","visibility:visible;");
}
}
// 点击X删除选择图片
$(".close-upimg").click(function() {
$(".add-img").attr("src", "/resources/img/room/upload.png");
$(".close-upimg").attr("style", "visibility:hidden;");
formData = new FormData();
formData.append("file", '');
$("#add-img").removeAttr("value");
})
$(function() {
$("#save_btn").click(function() {
if ($("#submit_form").valid()) {
var $target = $('#room_categories_div');
$.dm.block($target);// 开始区域锁定
var picNew = uploadFile(formData);// 获取上传的图片
var pic = $("#add-img").attr("value");// 获取前台页面的图片
if (pic != null && pic != "" && pic) {
$("#pic").val(pic);
} else {
$("#pic").val(picNew);
}
}
});
});
}))
function selectImage(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function(evt) {
var imag = $(".add-img").attr("src", evt.target.result).attr("style","height:150px;width:150px;");// 图片预览
var closeUpimg = $(".close-upimg").attr("style", "visibility:visible;");// 显示图片上的删除按钮X
}
uploadImage(file);
}
// 文件上传
var formData;
function uploadImage(file) {
formData = new FormData();
formData.append("file", file.files[0]);
}
function uploadFile(formData) {
var pic = "";
if (formData != null && formData.get("file") != "") {// 判断当上传数据为空时
$.ajax({
url : 'XXX',
type : 'POST',
async : false,
cache : false,
dataType : 'json',
data : formData,
processData : false,
contentType : false,
success : function(data) {
if (data.success) {
pic = data.result;
}
},
});
return pic;
}
}
JAVA:Controller:
@Autowired
private OSSHelper oSSHelper;
/**
* 上传文件
*/
@RequestMapping(value = "XXX.ajax", method = RequestMethod.POST)
@ResponseBody
public ResultDto<String> upload(@RequestParam("file") MultipartFile file,
@RequestParam("imageType") String imageType, @RequestParam("modulePath") String modulePath) {
ResultDto<String> response = new ResultDto();
if (file == null) {
logger.info("上传图片时,图片为空!");
response.setError("1", "上传图片时,图片为空!");
return response;
}
if (modulePath == null || "".equals(modulePath)) {
logger.info("上传图片时,模块路径不能为空!");
response.setError("1", "上传图片时,图片类型不能为空!");
return response;
}
String fileName = file.getOriginalFilename();
if (fileName == null || "".equals(fileName)) {
logger.info("图片上传张数不能为0");
response.setError("1", "图片上传张数不能为0");
return response;
}
if (imageType == null || "".equals(imageType)) {
logger.info("上传图片时,图片类型不能为空!");
response.setError("1", "上传图片时,图片类型不能为空!");
return response;
}
if (ImageTypeEnum.PIC.equals(imageType)) {
if (file.getSize() > Constant.PIC_MAX_SIZE) {
logger.info("上传图片大小不能超过" + (Constant.PIC_MAX_SIZE / 1048576) + "M");
response.setError("1", "上传图片大小不能超过" + (Constant.PIC_MAX_SIZE / 1048576) + "M");
return response;
}
} else if (ImageTypeEnum.ICON.equals(imageType)) {
if (file.getSize() > Constant.ICON_MAX_SIZE) {
logger.info("上传图标大小不能超过" + (Constant.ICON_MAX_SIZE / 1048576) + "M");
response.setError("1", "上传图标大小不能超过" + (Constant.ICON_MAX_SIZE / 1048576) + "M");
return response;
}
}
String fileLocalName = FileUrlUtil.getUrl(fileName, modulePath);
try {
logger.trace("开始上传到阿里云:" + fileLocalName);
String path = oSSHelper.upload(fileLocalName, file.getInputStream());
logger.trace("完成上传:" + path);
response.setResult(path);
} catch (IOException e) {
logger.error("上传图片异常,图片:" + fileName, e);
response.setError("1", "上传图片失败");
return response;
}
response.setSuccess(true);
response.setMessage("上传图片成功");
return response;
}
OSSHelper:
public String upload(String filename, InputStream is) {
ClientConfiguration conf = new ClientConfiguration();
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(Constant.OSS_ENDPOINT, Constant.OSS_ACCSESS_KEY_ID,
Constant.OSS_ACCSESS_KEY_SECRET);
// <yourObjectName>表示上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg。
PutObjectRequest putObjectRequest = new PutObjectRequest(Constant.OSS_BUCKET_NAME, filename, is);
// 上传文件。
ossClient.putObject(putObjectRequest);
// 关闭OSSClient。
ossClient.shutdown();
// ossClient.putObject(BUCKET_NAME_SAAS, filename, is);
// return Constant.OSS_ENDPOINT_ACCELERATE + "/" + filename;
return filename;
}