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