JavaScript 上传图片到七牛

Html

<input type="file" id="photo" accept="image/*">

JavaScript

$('#photo').change(function(){
  // 校验
   var filePath = $(this).val();
   var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
   if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
     alert('上传错误,文件格式必须为：png/jpg/jpeg');
     return;
   }
   var file = this.files[0];
   var fileName = this.files[0].name;
   var _token = '...' (需要后端对接七牛取token)
     upLoadQiniu(file, fileName, _token)
 })

// 上传 预览
function upLoadQiniu(file,  fileName, token) {
  var key = fileName; // 文件资源名
  var putExtra = {
    fname: "",  // 文件原文件名
    params: {}, // 用来放置自定义变量
    mimeType: ["image/png", "image/jpeg",, "image/jpg"]  // 用来限制上传文件类型，为 null 时表示不对文件类型限制
  };
  var config = {
    useCdnDomain: true,   // 表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
    region: null     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
  };
  var observable = qiniu.upload(file, key, token, putExtra, config)
  observable.subscribe({
    next(res){
      // 进度
    },
    error(err){
      // 报错
    },
    complete(res){
      // 完成
    }
  }) 
}

七牛JavaScript SDK
https://developer.qiniu.com/kodo/sdk/1283/javascript