• 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
    };
    }]);


  • 相关阅读:
    Navigator与UserAgent笔记
    linux常用命令 查看文件
    linux常用命令 ps
    linux grep命令详解
    svn突然不能用了!
    Macrotask Queue和Microtask Quque
    base.css
    跨域资源共享 CORS 详解
    react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)
    更新阶段的生命周期
  • 原文地址:https://www.cnblogs.com/opcec/p/9019985.html
Copyright © 2020-2023  润新知