OSS 上传图片详解

最新推荐文章于 2025-05-04 15:05:49 发布

紫露love

最新推荐文章于 2025-05-04 15:05:49 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： java

本文链接：https://blog.youkuaiyun.com/javazilu/article/details/70240608

java 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现阿里云OSS图片上传功能，包括获取文件URL、前端验证、上传逻辑以及针对不同浏览器的兼容处理。同时，文章还展示了在IE10及以上版本的实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

（如果有人给我提供一下如何发布html上来就更好了）

注：谷歌，IE10以及以上效果图

//自定义获取图片路径函数

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

function fileSelect(obj) {

if(obj.id=='idCardImgStr')

document.getElementByIdx_x_x_x("idCardf").click();

}

function fileSelected(obj) {

var url = getObjectURL(obj.files[0]);

if(obj.id=='idCardf')

$('#idCardImgStr').attr('src',url).show();//展示图片

$.ajax({

url : '${pageContext.request.contextPath}/driver/addImg/',

type : 'post',

async: false,

cache: false,

processData: false, // tell jQuery not to process the data ，这个是必须的，否则会报错

contentType: false, // tell jQuery not to set contentType

//dataType : 'text',

data : new FormData($("#addCorpUserForm")[0]),

success : function(data) {

if(data.status==1){

if(obj.id=='idCardf'){

$('#idCardImg').val(data.message); $curretDiv.find("#idCardImg").parent().parent().find(".form_error").html(''); }

;

}else

;

error : function(data){ }

});

}

//后台实现

@ResponseBody

@RequestMapping(value = "/addImg", method = RequestMethod.POST)

public ResponseBase addImg(@RequestParam MultipartFile idCardf) throws IOException {

final ResponseBase responseBase = new ResponseBase();

String suffix = idCardf.getOriginalFilename().toString();

String key = "funpic/template/"+suffix;

try {

OSSClient sossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);

ObjectMetadata omt = new ObjectMetadata();

omt.setLastModified(new Date());

//删除身份照照片

//ossService.deleteFile(key);

//上传照片

ossClient.putObject(this.bucketName, key,

new ByteArrayInputStream( idCardf.getBytes()), omt);

} catch (Exception e) {

logger.error("头像上传失败！" + e);

return ResponseBase.buildErrorResponse("头像上传失败！");

}

responseBase.setMessage(key);

return responseBase;

}

//上面的方法IE不支持

注：IE8,9效果图
oss上传部分跟上面一样，多加

//返回结果
PrintWriter out = response.getWriter();
out.println("
out.flush();
out.close();

js：

function iframeCallback(msg,imgType) {
var imgPath = url +msg;
if(imgType=="idCardf"){
$("#idCardImgStr").attr("src",imgPath);
$("#idCardImg").val(msg);
}

}