一、前端代码
1.请求后台上传方法
function dataLoad(type) {
$.post("user/uploadImg", function (data) {
if(type==0){
if (data.status == 666) {
$("input[name='OSSAccessKeyId']").val(data.OSSAccessKeyId);
$("input[name='Signature']").val(data.Signature);
$("#key1").val(data.key);
$("input[name='policy']").val(data.policy);
uploadFile();
}
}else if(type==1){
if (data.status == 666) {
$("input[name='OSSAccessKeyId']").val(data.OSSAccessKeyId);
$("input[name='Signature']").val(data.Signature);
$("#key2").val(data.key);
$("input[name='policy']").val(data.policy);
uploadFileUp();
}
}
}, "json");
}
2.上传到aliyun,并将图片展示在指定id位置
function uploadFile() {
$.ajax({
url: '上传地址', //上传地址
type: 'POST',
cache: false,
data: new FormData($('#myform')[0]), //表单数据
processData: false,
contentType: false,
success:function(data,status,xhr){
if (xhr.status=204){alert("success")
$("#img").attr("src","上传地址/"+$("#key1").val());
$("#headd").val($("#key1").val());
}
else alert("failed1")
},
error:function () {
alert("failed2")
}
});
}
3.上传按钮以及图标展示
<div class="form-group">
<div class="col-sm-10" style="margin-left:17%;margin-top:10px">
<img src="../img/a1.jpg" id="img" width="200" height="200">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#importPictureNewUserModal" style="margin-top: 14%;">
<span class="glyphicon glyphicon-export"></span> 上传头像
</button>
<input type="hidden" id="headd" name="head">
</div>
</div>
4.上传图片的form表单
<div class="modal fade" id="importPictureNewUserModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 50%;" style="overflow-y: auto;">
<div class="modal-content">
<form id="myform" method="post" enctype="multipart/form-data">
<input type="hidden" name="OSSAccessKeyId" value="">
<input type="hidden" name="policy" value="">
<input type="hidden" name="Signature" value="">
<input type="hidden" name="key" id="key1" value="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabelNewUser">上传头像图片</h4>
</div>
<div class="modal-body" style="height: 350px;">
<div style="position: relative;top: 20px; left: 50px;">
请选择要上传的图片:
<small style="color: gray;">[仅支持.jpg或.png格式]</small>
</div>
<div style="position: relative;top: 40px; left: 50px;">
<input name="file" type="file" id="file">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="aa()">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="dataLoad(0)">上传</button>
</div>
</form>
</div>
</div>
</div>
二、后台代码
1.controller层
//上传头像
@RequestMapping("/uploadImg")
@ResponseBody
public String uploadCheck(String suff) {
return userService.uploadImg(suff);
}
2.service层
@Override
public String uploadImg(String suff) {
FileUpload fileUpload = new FileUpload();
String result;
try {
Map postObject = fileUpload.getPostObject();
postObject.put("status", "666");
result = JSONObject.toJSONString(postObject);
} catch (UnsupportedEncodingException e) {
Map<String, String> maps = new HashMap<>();
maps.put("status", "444");
maps.put("erro", e.getMessage());
result = JSONObject.toJSONString(maps);
}
return result;
}
3.FileUpload
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.PolicyConditions;
import org.apache.commons.codec.binary.Base64;
import java.io.UnsupportedEncodingException;
import java.util.Calendar;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
public class FileUpload {
public final static String endpoint = "***";
public final static String accessKeyId = "***";
public final static String accessKeySecret = "***";
public Map getPostObject() throws UnsupportedEncodingException {
String key = UUID.randomUUID().toString().replace("-", "");
OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
PolicyConditions policyConditions = new PolicyConditions();
policyConditions.addConditionItem(PolicyConditions.COND_KEY, key);
Calendar calendar = Calendar.getInstance();
calendar.add(Calendar.MINUTE, 10);
String policy = ossClient.generatePostPolicy(calendar.getTime(), policyConditions);
String policyBase64 = Base64.encodeBase64String(policy.getBytes());
String signature = ossClient.calculatePostSignature(policy);
ossClient.shutdown();
return new HashMap() {{
this.put("OSSAccessKeyId", accessKeyId);
this.put("key", key);
this.put("policy", policyBase64);
this.put("Signature", signature);
}};
}
}
注:此处用到 阿里云 oss资源
欢迎大家补充
ps: