Question

简单的问题，如何创建angularjs上传表单到Parse.com？我正在尝试使用此stackoverflow answer创建个人资料图片上传器表单，但它不起作用

HTML代码

<div class="col-lg-9"  ng-controller="manageProfile">
    <form style="margin-top:80px">
        <div class="form-group">
            <label>Browse for Picture</label>
            <input type="file" name="profPic" id="profPic"></input>
        </div>
        <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button>
    </form>
</div>

AngularJS代码

profile.controller('manageProfile', ['$scope', function($scope) {
$scope.uploadPicture = function() {
    var fileUploadControl = $("#profPic")[0];
    var file = fileUploadControl.file[0];
    var name = file.name;
    var parseFile = new Parse.File(name, file);

    parseFile.save().then(function() {
        var currentUser = Parse.User.current();
        currentUser.set("profilePicture", parseFile);
        currentUser.save();
    }, function(error) {
        alert("Error: " + error.code + ' ' + error.message);
    });
}

尝试上传时出现此错误

error: fileuploadcontrol is undefined

Answer 1

在AngularJS中，输入元素使用ng-model指令将输入绑定到范围变量。

<div class="col-lg-9"  ng-controller="manageProfile">
    <form style="margin-top:80px">
        <div class="form-group">
            <label>Browse for Picture</label>
               <!-- add ng-model directive -->
            <input ng-model="fileName" type="file" name="profPic" id="profPic"></input>
        </div>
        <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button>
    </form>
</div>

在控制器中：

profile.controller('manageProfile', ['$scope', function($scope) {
    $scope.uploadPicture = function() {
        /* replace this
        var fileUploadControl = $("#profPic")[0];
        var file = fileUploadControl.file[0];
        var name = file.name;
        */
        //Use ng-model variable
        var name = $scope.fileName;
        //
    };

}]);

有关ng-model的详细信息，请参阅AngularJS ng-model Directive API Reference。

使用AngularJS上传表单上传图片进行解析

1 个答案: