白罂粟
白罂粟
  • 发布:2018-01-16 15:29
  • 更新:2018-01-16 15:29
  • 阅读:3193

上传图片和压缩

分类:HTML5+
分享自己写的一个上传图片并压缩的方法  
element是点击的元素  
defaultPic默认图片的名称  
defaultPath默认图片的路径  
category是我写的一个分类  
overwrite是否覆盖压缩 默认覆盖压缩  
quality压缩的大小 默认百分之二十  
overWriteName 图片压缩后的名称  
<div class="uploadPhotoItem">  
                    <img class="pictureUpload pictures" src="../../../images/pic_morentu.jpg">  
                    <span>照片</span>  
                </div>  
//获取上传图片元素  
  var pictureUploads = document.getElementsByClassName('pictureUpload');  
for (var i = 0; i < pictureUploads.length; i++) {  
      utilsJs.uploadPictures({  
        element: pictureUploads[i],  
        defaultPic: 'pic_morentu',  
        defaultPath: '../../images/pic_morentu.jpg',  
        category: 'order',  
        onSuccess: function () {  

        },  
        onFailed: function () {  
          ApiConfig.staticShowToast('图片上传失败');  
        }  
      })  
    }  
Utils.prototype.uploadPictures = function (options) {  
  var _this = this;  
  options = options || {};  
  var element = options.element;  
  var quality = options.quality;  
  var category = options.category;  
  var overwrite = options.overwrite;  
  var defaultPic = options.defaultPic;  
  var defaultPath = options.defaultPath;  
  var overWriteName = options.overWriteName;  
  if (element) {  
    element.addEventListener('tap', function () {  
      _this.selectUploadWay({  
        element: element,  
        quality: quality,  
        category: category,  
        overwrite: overwrite,  
        defaultPic: defaultPic,  
        defaultPath: defaultPath,  
        overWriteName: overWriteName,  
        onSuccess: function (responseJson) {  
          options.onSuccess && options.onSuccess(responseJson);  
        },  
        onFailed: function (errorJson) {  
          options.onFailed && options.onFailed(errorJson);  
        },  
        onCompleted: function () {  
          options.onCompleted && options.onCompleted();  
        }  
      });  
    })  
  }  
}  
Utils.prototype.selectUploadWay = function (options) {  
  options = options || {};  
  var _this = this;  
  var element = options.element;  
  var defaultPic = options.defaultPic;  
  var defaultPath = options.defaultPath;  
  var overWriteName = options.overWriteName;  
  var bts = [{  
    title: '相册'  
  }, {  
    title: '拍照'  
  }, {  
    title: '删除'  
  }];  
  plus.nativeUI.actionSheet({  
      cancel: "取消",  
      buttons: bts  
    },  
    function (e) {  
      var i = e.index;  
      switch (i) {  
        case 1:  
          // 拍照添加文件  
          plus.gallery.pick(function (path) {  
            _this.uploadPictureHandle({  
              src: path,  
              dst: options.dst,  
              quality: options.quality,  
              element: options.element,  
              category: options.category,  
              overwrite: options.overwrite,  
              overWriteName: overWriteName,  
              onSuccess: function (responseJson) {  
                options.onSuccess && options.onSuccess(responseJson);  
              },  
              onFailed: function (errorJson) {  
                options.onFailed && options.onFailed(errorJson);  
              },  
              onCompleted: function () {  
                options.onCompleted && options.onCompleted();  
              }  
            })  
          });  
          break;  
        case 2:  
          // 从相册添加文件  
          plus.camera.getCamera().captureImage(function (path) {  
            _this.uploadPictureHandle({  
              src: path,  
              dst: options.dst,  
              quality: options.quality,  
              element: options.element,  
              category: options.category,  
              overwrite: options.overwrite,  
              overWriteName: overWriteName,  
              onSuccess: function (responseJson) {  
                options.onSuccess && options.onSuccess(responseJson);  
              },  
              onFailed: function (errorJson) {  
                options.onFailed && options.onFailed(errorJson);  
              },  
              onCompleted: function () {  
                options.onCompleted && options.onCompleted();  
              }  
            })  
          });  
          break;  
        case 3:  
          if (element.src.indexOf(defaultPic) >= 0) {  
            ApiConfig.staticShowToast('当前未上传图片,无法删除');  
          } else {  
            element.src = defaultPath;  
          }  
          break;  
        default:  
          break;  
      }  
    }  
  );  
}  
Utils.prototype.uploadPictureHandle = function (options) {  
  options = options || {};  
  var element = options.element;  
  var overWriteName = options.overWriteName;  
  if (!options.overwrite) {  
    overWriteName = '_doc/default.jpg';  
  }  
  plus.zip.compressImage({  
      src: options.src,  
      dst: overWriteName,  
      quality: options.quality || 20,  
      overwrite: options.overwrite || true  
    },  
    function (event) {  
      dpHttp.upLoadPictureHttp({  
        files: event.target,  
        category: options.category,  
        onSuccess: function (responseJson) {  
          element.src = responseJson.url;  
          options.onSuccess && options.onSuccess(responseJson);  
        },  
        onFailed: function (errorJson) {  
          options.onFailed && options.onFailed(errorJson);  
        },  
        onCompleted: function () {  
          options.onCompleted && options.onCompleted();  
        }  
      });  
    },  
    function (error) {  
      options.onFailed && options.onFailed(error);  
      console.log(JSON.stringify(error));  
    }  
  );  
}  
HttpUtils.prototype.upLoadFile = function (options) {  
  var wt = plus.nativeUI.showWaiting();  
  options = options || {};  
  var responseJson = null;  
  var postParams = options.postParams;  
  var postFilesMap = options.postFilesMap;  

  ApiConfig.staticIsDebug('upLoadFile', options.url);  
  var task = plus.uploader.createUpload(options.url, {  
    method: "POST",  
    priority: 100  
  }, function (t, status) {  
    if (status == 200) {  
      try {  
        wt.close();  
        responseJson = JSON.parse(t.responseText);  
        if (responseJson.rt) {  
          ApiConfig.staticIsDebug('responseJson', responseJson, 1);  
          options.onSuccess && options.onSuccess(responseJson);  
        } else {  
          ApiConfig.staticIsDebug('errorJson', responseJson, 1);  
          options.onFailed && options.onFailed(responseJson);  
        }  
      } catch (e) {  
        wt.close();  
        ApiConfig.staticIsDebug('error', e);  
        ApiConfig.staticIsDebug('errorJson', xhr.responseText);  
        options.onFailed && options.onFailed(responseJson);  
      }  
    } else {  
      wt.close();  
      ApiConfig.staticIsDebug('errorJson', responseJson, 1);  
      options.onFailed && options.onFailed(responseJson);  
    }  
  });  
  //task.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  var keys = postFilesMap.keys();  
  task.addFile(postFilesMap.get(keys[0]), {  
    key: keys[0]  
  });  
  if (postParams) {  
    var paramsKeys = postParams.keys();  
    if (paramsKeys.length > 1) {  
      paramsKeys.forEach(function (key) {  
        task.addData(key, postParams.get(key));  
      })  
    } else {  
      task.addData(paramsKeys[0], postParams.get(paramsKeys[0]));  
    }  
  }  
  task.start();  
}
0 关注 分享

要回复文章请先登录注册