javascript - angularjs 清晰表单输入类型文件

Question

每次单击“发布”时，我都会尝试清除表单:

$scope.product = {};
        $scope.upload = function(user) {
            var formData = new FormData;
            $scope.product.owner = user;

            for (key in $scope.product) {
                formData.append(key, $scope.product[key]);
                //console.log(key, ".........");
                //console.log($scope.product[key]);
            };

            //getting the file
            var file = $('#file')[0].files[0];
            formData.append('image', file);

            $http.post('http://localhost:3000/products', formData, {
                transformRequest: angular.identity,
                headers: {
                    'Content-Type': undefined
                }
            }).then(function(res) {
                $scope.item = res.data;
                console.log($scope.item.image);
                products.displayuserlist.push({
                    owner: $scope.product.owner,
                    car: $scope.product.newCar,
                    //seaters: 5,
                    price: $scope.product.newPrice,
                    //contact: 38880000,
                    area: $scope.product.businessArea,
                    image: $scope.item.image
                });
               $scope.product = null;
            });

        };

除

之外的所有输入填充均已清除

<form ng-submit="upload(currentUser())">
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Car</label>
                            </div>
                            <div class="col-xs-5">
                                <input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="product.newCar" required>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Price(RM) per day</label>
                            </div>
                            <div class="col-xs-5">
                                <input type="text" placeholder="80" class="form-control" ng-model="product.newPrice" required>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Business Area</label>
                            </div>
                            <div class="col-xs-5">
                                <input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="product.businessArea" required>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                                <label>Insert Car Image</label>
                                <br>
                            </div>
                            <div class="col-xs-5">
                                <!--<button type="button" class="btn btn-default btn-sm">
                                    <span class="glyphicon glyphicon-picture"></span> Image
                                </button>-->
                                <input type="file" id="file" ng-model="product.postimage" />
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-xs-2">
                            </div>
                            <div class="col-xs-5">
                                <button type="submit" class="btn btn-primary btn-sm pull-right">
                                    <span class="glyphicon glyphicon-globe"></span> Publish
                                </button>
                            </div>
                            <div class="col-xs-5"></div>
                        </div>
                    </div>
                    <br>
                    <br>
                </form>

我尝试使用 angular.element("input[type='file']").val(null);和 $setPristine() 但它不起作用。我该怎么做？

Answer 1

你可以试试这个

$scope.product.postimage = null;
$('#file').val('');