zoukankan      html  css  js  c++  java
  • angularjs 图片上传

    <input type="file" file-model="myFile"/>
    <div class="col-md-12">
    <img ng-src="{{imageSrc}}" style="max-68px;max-height:68px;display:block;" />
    </div>

    //controller
    $scope.getFile = function (files) {
    console.log(files);
    fileReader.readAsDataUrl(files, $scope)
    .then(function (result) {
    $scope.imageSrc = result;
    console.log(result);
    });
    };
    $scope.leaveSubmit = function (e) {
    console.log($scope.messages);
    if ($scope.messages ==='' || $scope.messages === undefined){
    $ionicLoading.show({
    template: '请填写您的需求!',
    duration: 2000,
    showBackdrop: false
    });
    return;
    }
    var data = {
    fileName: $scope.imageSrc
    // userFeedback: $scope.userFeedback.message
    };
    var fd = new FormData();
    angular.forEach(data, function(val, key) {
    fd.append(key, val);
    });
    $http({
    url: "",
    data: fd,
    headers: {'Content-Type': undefined},
    transformRequest: angular.identity
    }).success(function (res) {
    console.log('1'+ res);
    }).error(function (err) {
    console.log(err);
    $rootScope.showMsg("网络错误");
    })

    };

    app.directive('fileModel', ['$parse', function ($parse) {
    return {
    restrict: 'A',
    link: function (scope, element, attrs, ngModel) {
    var model = $parse(attrs.fileModel);
    var modelSetter = model.assign;
    element.bind('change', function (event) {
    scope.$apply(function () {
    modelSetter(scope, element[0].files[0]);
    });
    //附件预览
    scope.file = (event.srcElement || event.target).files[0];
    console.log(scope.file);
    scope.getFile(scope.file);
    });
    }
    };
    }]);
    Mine.factory('fileReader', ["$q", "$log", function ($q, $log) {
    var onLoad = function (reader, deferred, scope) {
    return function () {
    scope.$apply(function () {
    deferred.resolve(reader.result);
    });
    };
    };
    var onError = function (reader, deferred, scope) {
    return function () {
    scope.$apply(function () {
    deferred.reject(reader.result);
    });
    };
    };

    var getReader = function (deferred, scope) {
    var reader = new FileReader();
    reader.onload = onLoad(reader, deferred, scope);
    reader.onerror = onError(reader, deferred, scope);
    return reader;
    };

    var readAsDataURL = function (files, scope) {/*上传图片的主函数*/
    console.log(files);
    var deferred = $q.defer();
    var reader = getReader(deferred, scope);
    reader.readAsDataURL(files);
    return deferred.promise;
    };

    return {
    readAsDataUrl: readAsDataURL
    };
    }]);


  • 相关阅读:
    Div+Css布局教程(-)CSS必备知识
    html表格设置
    wxAui Frame Management用法
    aui
    MySQL死锁
    InnoDB索引存储结构
    MySQL事务调优
    MySQL慢SQL语句常见诱因
    InnoDB的LRU淘汰策略
    InnoDB事务之redo log工作原理
  • 原文地址:https://www.cnblogs.com/opcec/p/9019985.html
Copyright © 2011-2022 走看看