OSS 上传图片详解

html

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

注：谷歌，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不支持

注：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);
    }

}