ajaxFileupload上传图片到阿里云

来源：互联网发布：php use require 区别编辑：程序博客网时间：2024/05/21 17:47

目标：使用ajaxfileupload组件上传图片，并回显

1.先引入js和ajaxFileupload上传组件

<p class="pr">
<a href="javascript:;" class="file js_sf1">
<img class="fi_i" src="${cxt}/static/images/main/filimg.png"/>
<span class="fi_s">上传身份证正面</span>
<input type="hidden" name="idCardFront" id="idCardFront"/>
<input class="infi" type="file" name="file" id="file"/>
</a>
<a href="javascript:;" class="file js_sf2">
<img class="fi_i" src="${cxt}/static/images/main/filimg.png"/>
<input type="hidden" name="idCardOpposite" id="idCardOpposite"/>
<span class="fi_s">上传身份证反面</span>
<input class="infi" type="file" id="fileOpposite" name="fileOpposite"/>
</a>
</p>

3.script写法：

//上传身份证图片
$(".js_sf1").change(function(){
var $this=$(this);
$.ajaxFileUpload({
url:"/team/uploadIdentificationImage",
secureuri:false,
fileElementId:"file",//文件选择框的id属性
dataType:'json',
success: function (data) {
if(data.status==200){
alert(data.results);
var picUrl = data.results.picUrl;
if(picUrl!=null){
$this.find('img').attr('src',picUrl).css({"width":"100%","height":"100%","margin-top":"0"}).siblings().hide();
$("#idCardFront").val(picUrl);
}else{
alert("图片上传失败，请重新上传！");
}
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert('图片上传失败，请重新上传！');
}
});
});

4.后台：

@RequestMapping("/uploadIdentificationImage")
@ResponseBody
public ResponseDTO addImage(HttpServletRequest request, HttpServletResponse response) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
ResponseDTO responseDTO = new ResponseDTO(null,ReturnCode.SUCCESS.getCode(),ReturnCode.SUCCESS.getMsg());
for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
String key = (String) it.next();
MultipartFile pic = multipartRequest.getFile(key);
Map<String,Object> result = new HashMap<String,Object>();
try {
long beginTime = System.currentTimeMillis() ;
if(pic == null ){
logger.info("上传图片为空{}",pic);
responseDTO.setMsg("上传图片为空");
responseDTO.setStatus(ReturnCode.ERROR.getCode());
return responseDTO ;
}
UploadImgInfo re = OssUtil.uploadPic2OSS(pic, OssUtil.BACKET_NAME, OssUtil.FOLDER);
String picUrl;
if (re == null) {
throw new RuntimeException("上传失败");
}else{
picUrl = re.getUrl();
}
result.put("picUrl", picUrl);
responseDTO.setResults(result);
long endTime = System.currentTimeMillis() ;
System.out.println("消费时间："+(endTime-beginTime));
} catch (Exception e) {
logger.info("addImage 上传图片 ERROR："+e.getMessage());
responseDTO.setMsg(e.getMessage());
responseDTO.setStatus(ReturnCode.ERROR.getCode());
}
}

return responseDTO;
}

6.阿里云工具类：

/**
* 上传图片至OSS
*
* @param ossClient oss连接
* @param file 上传文件（文件全路径如：D:\\image\\cake.jpg）
* @param bucketName 存储空间
* @param folder 模拟文件夹名如"qj_nanjing/"
* @return String 返回的唯一MD5数字签名
*/
public static UploadImgInfo uploadPic2OSS(MultipartFile multipartfile ,
String bucketName,
String folder) {
OSSClient ossClient = getOSSClient();
createBucketName(ossClient,bucketName);
UploadImgInfo resultInfo = null;
try {
// 以输入流的形式上传文件
InputStream is = multipartfile.getInputStream();
// 文件名
String orgName = multipartfile.getOriginalFilename();
String ext = FilenameUtils.getExtension(orgName).toLowerCase();
String fileName = UuidUtil.getUUID()+"."+ext;
String contextType= getContentType(multipartfile.getOriginalFilename());

logger.info("orgName----:"+orgName+"ext:"+ext+"fileName:"+fileName);
// 文件大小
Long fileSize = multipartfile.getSize();
// 创建上传Object的Metadata
ObjectMetadata metadata = new ObjectMetadata();
// 上传的文件的长度
metadata.setContentLength(is.available());
// 指定该Object被下载时的网页的缓存行为
metadata.setCacheControl("no-cache");
// 指定该Object下设置Header
metadata.setHeader("Pragma", "no-cache");
// 指定该Object被下载时的内容编码格式
metadata.setContentEncoding("utf-8");
// 文件的MIME，定义文件的类型及网页编码，决定浏览器将以什么形式、什么编码读取文件。如果用户没有指定则根据Key或文件名的扩展名生成，
// 如果没有扩展名则填默认值application/octet-stream
metadata.setContentType(contextType);
// 指定该Object被下载时的名称（指示MINME用户代理如何显示附加的文件，打开或下载，及文件名称）
metadata.setContentDisposition("filename/filesize=" + fileName + "/" + fileSize + "Byte.");
// 上传文件 (上传文件流的形式)
PutObjectResult putResult = ossClient.putObject(bucketName, folder + fileName, is, metadata);
System.out.println("上传解析结构+++++" + putResult);
// 解析结果
String resultStr = putResult.getETag();
if (StringUtils.isNotEmpty(resultStr)) {
resultInfo = new OssUtil.UploadImgInfo();
String key = folder + fileName;
String url = getUrl(ossClient,key);
resultInfo.setUrl(url);
resultInfo.setKey(key);
String imgPath_original = url.substring(url.indexOf(ENDPOINT)+ENDPOINT.length());
resultInfo.setImgPath_original(imgPath_original);
resultInfo.setFile_name(fileName);
//缩略图
String turl = getResizeUrl(key,100);
resultInfo.setUrl_thumbnail(turl);
String imgPath_thumbnail = turl.substring(url.indexOf(ENDPOINT)+ENDPOINT.length());
resultInfo.setImgPath_thumbnail(imgPath_thumbnail);
}
} catch (Exception e) {
e.printStackTrace();
logger.error("上传阿里云OSS服务器异常." + e.getMessage(), e);
}
return resultInfo;
}

阅读全文

0 0