Home  >  Article  >  Web Front-end  >  angular ng-file-upload source code

angular ng-file-upload source code

巴扎黑
巴扎黑Original
2017-06-26 15:16:121410browse

Portal:

<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
, [, 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));
        });
    }
};
<span style="color: #000000"><br></span><span style="color: #000000"> }]);</span>

html

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

The above is the detailed content of angular ng-file-upload source code. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn