js前端上传图片（input的样式问题，直传七牛云的问题）

1、样式问题(input透明度为0，父元素背景图)

<div class="update-item" >
    <input class="file-update" type="file" name="image[]" accept="image/*" >
</div>

.update-item {
    width: 90px;
    height: 120px;
    margin: 0 auto;
    background-color: #fff;
    background-image: url(../images/upload_img.png);
    background-size: 67px 64px;
    background-position: center center;
    background-repeat: no-repeat;
}
input.file-update {
    width: 90px;
    height: 120px;
    background-color: transparent;
    border: 1px dashed #ededed;
    text-indent: -9999px;
    opacity: 0;
}

 

2、上传七牛云（前端oss直传会比较快,获取token,上传成功后拼接图片地址）

a.input事件，做了一秒延迟，确保上传七牛云完成后再调用地址，并且loading效果能显示

b.base64格式要分地区的，在七牛云上查询，我的是华南，路径后的-1是不判断上传的图片的大小，可以是具体的大小

$('.file-update').change(function(){
  var reader = new FileReader();
    //filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
    reader.readAsDataURL(this.files[0]);
    reader.onload = function(e) {
      //或者 e.target.result都是一样的，都是base64码
      imgStr = reader.result.split(',')[1];
    }
  $('.update-item').attr("style","background-image: url(../images/loading_big.gif);background-size: 60px 60px");
  setTimeout(function(){
    qnToken();
    uploadImg();
  },1000)
})

//七牛token 七牛云平台安全标识
var qiniutoken = '';
//七牛云图片base64格式上传地址
var uploadUrl = "http://upload-z2.qiniup.com/putb64/-1";
//需要上传的图片内容 base64格式
var imgStr = '';

//七牛云平台 配置的域名
var urlHeader = "后端给的配置好的域名";

//获取七牛云token
function qnToken() {
  $.ajax({
    url: 'xxx',
    type: 'get',
    dataType: 'json',
    async:false,
    success: function(data) {
      qiniutoken = data.data.token;
    },
    error: function(e){
      alert(JSON.stringify(e));
    }
  })
}

//上传图片
function uploadImg() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", uploadUrl, true);
  //文本类型
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  //七牛认证信息 注意空格
  xhr.setRequestHeader("Authorization", "UpToken " + qiniutoken);
  xhr.send(imgStr);
  //监听状态
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
      var result = xhr.responseText;
      result = JSON.parse(result);
      $('.update-item').attr("style","background-image: url("+urlHeader + result.hash+");background-size: 100% 100%;")
      $('.file-update').attr('data-picId',urlHeader + result.hash);
    }
  }
}

 

转载于:https://www.cnblogs.com/congfeicong/p/11112716.html