Javascript 上载时向对象添加新数组_Javascript_Angularjs_Arrays_Json

Javascript 上载时向对象添加新数组

javascript angularjs arrays json

Javascript 上载时向对象添加新数组,javascript,angularjs,arrays,json,Javascript,Angularjs,Arrays,Json,我有一个上传脚本，你上传一个图像，它会使用我的控制器中有一个对象，我将数据发布到端点，我需要两件事 base_图像值是图像的base64代码每次上传时都要创建一个新对象有人能帮我做到这一点吗？多谢各位摘要 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en" n

我有一个上传脚本，你上传一个图像，它会使用

我的控制器中有一个对象，我将数据发布到端点，我需要两件事

base_图像值是图像的base64代码

每次上传时都要创建一个新对象

有人能帮我做到这一点吗？多谢各位

摘要

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular Base64 Upload Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

<div ng-controller="PostData">
    <strong>Campaign Name :</strong>
    {{items.c_name}}
    <br>
    <strong>Max Slots :</strong>
    {{items.max_slots}}    
</div>    

<div class="container" ng-controller="AddImage">
    <form name="form">
        <h3>Add Creatives</h3>
        <div class="input-group">
            <label for="file">Select Files</label>
            <span class="help-block">
        <ul>
            <li>required</li>
            <li>Maxsize = 600</li>
            <li>Accept = image</li>
            <li>Maximum = 5</li>
        </ul>
    </span>

    <input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*" maxsize="600" required maxnum ="5" on-change="onChange" onload="onLoad"
                   ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" required>

        </div>
        <div class="alert" ng-class="{'alert-danger': form.files.$invalid, 'alert-success': form.files.$valid}">
            form.files.$error:
            {{form.files.$error}}
        </div>
        <b>Model Value:</b>
        <table class="table table-bordered table-striped">
            <tr>
                <th>filename</th>
                <th>thumbnail</th>
                <th>filetype</th>
                <th>filesize (<i><small>KB</small></i>)</th>
                <th>base64</th>
            </tr>
            <tr ng-repeat="file in files">
                <td>{{file.filename}}</td>
                <td ng-repeat="step in stepsModel"><img class="thumb" ng-src="{{step}}"/></td>
                <td>{{file.filetype}}</td>
                <td>{{file.filesize / 1000}}</td>
                <td>{{file.base64.substring(0, 30)}}...</td>
            </tr>
            <tr>
                <td colspan="4" ng-show="files.length == 0">
                    <small><i>No file selected.</i></small>
                </td>
            </tr>
        </table>
    </form>
</div>

<form ng-submit="sendPost()">
    <button type="submit">Save</button>
</form>

</body>
</html>

每次我添加一张新照片时，我都希望post对象数组添加一个新的插槽，例如

插槽id:1、

插槽id:2

等等，并且插槽中的图像在对象

base\u image

var data = $.param({
    json: JSON.stringify({
        c_name: $scope,
        max_slots: $scope,
        slots: [{
            slot_id: 1,
            base_image: "base 64 image"
        }]
    })
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular Base64 Upload Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

<div ng-controller="PostData">
    <strong>Campaign Name :</strong>
    {{items.c_name}}
    <br>
    <strong>Max Slots :</strong>
    {{items.max_slots}}    
</div>    

<div class="container" ng-controller="AddImage">
    <form name="form">
        <h3>Add Creatives</h3>
        <div class="input-group">
            <label for="file">Select Files</label>
            <span class="help-block">
        <ul>
            <li>required</li>
            <li>Maxsize = 600</li>
            <li>Accept = image</li>
            <li>Maximum = 5</li>
        </ul>
    </span>

    <input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*" maxsize="600" required maxnum ="5" on-change="onChange" onload="onLoad"
                   ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" required>

        </div>
        <div class="alert" ng-class="{'alert-danger': form.files.$invalid, 'alert-success': form.files.$valid}">
            form.files.$error:
            {{form.files.$error}}
        </div>
        <b>Model Value:</b>
        <table class="table table-bordered table-striped">
            <tr>
                <th>filename</th>
                <th>thumbnail</th>
                <th>filetype</th>
                <th>filesize (<i><small>KB</small></i>)</th>
                <th>base64</th>
            </tr>
            <tr ng-repeat="file in files">
                <td>{{file.filename}}</td>
                <td ng-repeat="step in stepsModel"><img class="thumb" ng-src="{{step}}"/></td>
                <td>{{file.filetype}}</td>
                <td>{{file.filesize / 1000}}</td>
                <td>{{file.base64.substring(0, 30)}}...</td>
            </tr>
            <tr>
                <td colspan="4" ng-show="files.length == 0">
                    <small><i>No file selected.</i></small>
                </td>
            </tr>
        </table>
    </form>
</div>

<form ng-submit="sendPost()">
    <button type="submit">Save</button>
</form>

</body>
</html>