angular ng-file-upload

傳送門：https://github.com/danialfarid/ng-file-upload#install

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>

//注入 ngFileUpload （注意：如果你用ui-load對於每個html加載文件 ，要把ng-file-upload文件放到首頁去加載，不能寫在ui-load里面，以免注入的時候找不到文件）
var app = angular.module('fileUpload', ['ngFileUpload']);

//Upload

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {


// 上傳方法 uploadFiles 

$scope.uploadFiles = function(file, errFiles) {
   
    var  url = '/product/pictures/updataPicture.do'; //接口名
     
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    if (file) {
        file.upload = Upload.upload({
            url: url,
            data: {uploadFileName: file, 'prodId': $scope.prodId, 'prictureGroup': $scope.prictureGroup ,'sortOrder' : $scope.sortOrder}//參數對應
        });

        file.upload.then(function (res) {
            // 上傳成功時操作
        }, function (response) {
            // if (response.status > 0)
            //     $scope.errorMsg = response.status + ': ' + response.data;
        }, function (evt) {
            // file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }
};

  }]);

html

<button type="file" ngf-select="uploadFiles($file, $invalidFiles)" accept="mage/jpeg,image/gif,image/png" ngf-max-height="1000" ngf-max-size="1MB"></button> 
<img src="{{上傳成功后接口返回圖片url}}" alt="">