Question

I have to upload 5 image and save it into the database. But I only have one button. How can I successfully do this please help. I am very new in angular and don't know how to start. When I click the button I get undefined. This is my fiddle :http://jsfiddle.net/DharkRoses/hxncw3vm/3/

sample code in my fiddle:

angular.module('test', []);

angular.module('test')
.controller('UploadCtrl', function ($scope, $timeout) {

$scope.thumbnail = {
    dataUrl: 'adsfas'
};
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files) {
    if (files != null) {
        var file = files[0];
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.thumbnail.dataUrl = e.target.result;
                    });
                }

Answer 1

问题是ng-repeat为每个项目创建了一个新的范围，这在ng-repeat之外是不可用的。

以下情况有效，因为ng-click在ng-repeat中。

<tr ng-repeat="i in [1, 2, 3, 4]">
    <td> ID : {{i}}
        <br>Photo:
        <input type="file" ngf-select ng-model="picFile" name="file" accept="image/*" ngf-max-size="2MB" required> <i ng-show="myForm.file.$error.required">*required</i>
        <img ngf-thumbnail="picFile" class="thumb">
        <button ng-click="picFile = null" ng-show="picFile">Remove</button>
        <br>
        <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'"></div>
        </span> <span ng-show="picFile.result">Upload Successful</span>
        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
        <button ng-click="uploadPic(picFile)">Submit</button> <span class="progress" ng-show="picFile.progress >= 0">
    </td>
</tr>

您可以通过在控制器中创建范围数组来解决问题，例如：

$scope.pics = [
    {picFile: []},
    {picFile: []},
    {picFile: []},
    {picFile: []}
];

html将在ng-repeat循环中使用pics数组。

<body ng-app="fileUpload" ng-controller="MyCtrl">
    <form name="myForm">
        <fieldset>
            <table>
                <tr ng-repeat="(k, i) in pics">
                    <td> ID : {{k+1}}
                        <br>Photo:
                        <input type="file" ngf-select ng-model="i.picFile" name="file" accept="image/*" ngf-max-size="2MB" required> <i ng-show="myForm.file.$error.required">*required</i>
                        <img ngf-thumbnail="i.picFile" class="thumb">
                        <button ng-click="i.picFile = null" ng-show="i.picFile">Remove</button>
                        <br>
                        <div style="width:{{i.picFile.progress}}%" ng-bind="i.picFile.progress + '%'"></div>
                        </span> <span ng-show="i.picFile.result">Upload Successful</span>
                        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
                    </td>
                </tr>
            </table>
            <button ng-click="uploadPic(pics)">Submit</button>
        </fieldset>
        <br>
    </form>
</body>

How to update multiple image in one click button and save it to the database

1 个答案: