angularjs之手机端input图片上传

呐，好久不见，今天要说的是input上传图片，主角上场~
<input type="file" capture="camera" accept="image/*">
其实只要type=”file”这个属性就够了，但是由于这边是在手机上访问，要能够调起手机的照相机和相册，所以就需要有后面的属性了。

现在如果我已经在相册选择一张图片了，那怎么获取图片数据呢？
传统做法就是加上onchange事件，但是由于使用的是angularjs，按道理应该用ng-change事件，不幸的事，并不触发…实际上onchange是可以触发的，但是并不能找到controller里对应的事件处理方法…
代码里写上 onchange=”uploadDown()”，controller里也有对应事件，但是报错：
这里写图片
救命…

冥冥之中感觉需要用指令了，在stackoverflow上找到下面这个，就不费脑细胞造轮子啦，哈哈~

app.register.directive('inputOnChange', function(){
  return{
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeFunc = scope.$eval(attrs.inputOnChange);
      element.bind('change', onChangeFunc);
    }
  }
});

下来在input上加上这个属性就ok了：

<input type="file" capture="camera" accept="image/*" input-on-change="uploadDown">

controller里事件：

$scope.uploadDown = function () {
      var file = event.target.files[0].name;
      alert('选择的文件名称：'+file);
    }

以上取到的是文件的名字，很明显，只有文件名可不够哇，有的同学可能需要base64？

h5里有个FileReader对象，可以获取各种信息…
当然用之前最好还是判断下当前浏览器是否支持：

if(type of FileReader === 'undefined'){
    alert('不支持');
}

ok，完善一下uploadDown()事件：

 $scope.uploadDown = function () {
      var file = event.target.files[0];
       //判断类型是不是图片
      if (!/image\/\w+/.test(file.type)) {
        alert("非图片");
        return;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
          alert(this.result);//base64
      }
    }

顺便说下FileReader的方法：
readAsBinaryString(file) —— 将文件读取二进制码
readAsText(file,[encoding]) —— 将文件读取文本（encoding默认UTF-8）
readAsDataURL(file) —— 将文件读取为DataURL
abort() ——- 中断读取操作

以及FileReader的事件：
onabort ———数据读取中断时触发
onerror ———数据读取出错时触发
onloadstart ——–数据读取开始时触发
onprocess ——–数据读取中
onload ——–数据读取成功完成时触发
onloadend ——–数据读取完成时触发，无论成功失败

很明显，我这边用的是onload和readAsDataURL(file)
好啦，到目前为止，该取的都取到了，下来就可以用$resource将数据传给后端服务了~

可能有些同学还是不满意，因为当前虽然能获取到所选图片的数据，但是只存在于js端，如果需要给用户预览呢？

   $scope.uploadDown = function () {
      var file = event.target.files[0];
      $scope.imgSrc=window.URL.createObjectURL(file);//这个方法只支持火狐类，手机上没人用IE吧，哈哈哈
    };

 <img src="{{imgSrc}}" style="display: block; width: 200px; height: 150px;">

以上即可。

angularjs之手机端input图片上传

猜你喜欢