angularjs 图片上传

  <label>
         <img src="{{url}}" width="200" id="url" ng-model="pics.url">
  </label>
   <input type="file" accept="image/png, image/jpeg, image/gif, image/jpg" alt="" onchange="angular.element(this).scope().changepic(this)">
   <button class="btn" ng-click="Upload($event)">上传</button>

    //重新选择图片的change事件
    $scope.changepic = function (obj) {
            var newsrc = $scope.getObjectURL(obj.files[0]);
             //给img元素src赋值
            $(obj).siblings("label").children("img").attr("src", newsrc);
        }
        $scope.getObjectURL = function(file) {
                var url = null;
                // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
           }

 

 

   //当上传完了之后需要清空file控件文件域的值 非常关键 再次选择相同图片的时候 因为上一次的值没有清空 选择相同的值就不change事件不会触发 
   //导致change事件里面给Img赋值的src就一直为空

    $scope.clear = function () {

            $("img").attr("src", "");
            var fildom = '<input type="file" accept="image / png, image / jpeg, image / gif, image / jpg" alt="" onchange="angular.element(this).scope().changepic(this)">';
            //元素替换
            $("input[type=file").replaceWith(fildom);
        }

 

 

  //图片上传方法
 $scope.Upload = function (obj) {
                var file = $(obj.target).siblings("input[type=file]")[0].files;
                if (file.length==0) {
                    return;
                }
                var name = file.name
                var uploadData = new FormData();
                uploadData.append('file', file[0]);
                $.ajax({
                    url: '/Helper/UploadImg',//上传接口
                    type: 'POST',
                    data: uploadData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.errcode == 0) {
                            var time = new Date().getTime();    //用于提供实时随机数
                            $(obj.target).siblings("label").children("img").attr("src", data.src + "?" + time);
                           
                         } else {
                            layer.msg(data.src, { time: 2000 })
                        }
                    }

                });
        }