文件上传到阿里云，前台html，后台java

效果：

上传图片前：

上传图片后：

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;
    }