OSS 上传图片详解

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

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

html
OSS <wbr>上传图片详解
(如果有人给我提供一下如何发布html上来就更好了)
OSS <wbr>上传图片详解

注:谷歌,IE10以及以上效果图
js
//自定义获取图片路径函数
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 extName = "JPG,GIF,PNG,JPEG,BMP";
    if(extName.indexOf(obj.files[0].name.substr(obj.files[0].name.lastIndexOf(".")+1).toUpperCase())<0)   
      $.showPop({
              title: '',
              content: "请选择正确的图片文件",
              confirm: function(){
              }
        });
        return false;   
    }
    if(obj.files[0].size/1024>5120){
      $.showPop({
            title: '',
            content: "请选择小于5M的图片",
            confirm: function(){
            }
      });
        return false;
    }
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不支持
OSS <wbr>上传图片详解

OSS <wbr>上传图片详解
注: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);
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值