Question

我需要保存HTML form，其中包含一些输入数据控件，例如select，input和textarea，以及使用{{ 1}}。因此，我可以通过单击``保存''按钮并初始化输入控件名称进行建模来保存数据。因此，如何在由javascript设计的角度控制器中获取图像。以及如何将图像保存到本地文件夹中，以及如何将本地文件夹中保存的图像链接保存到数据库中？

HTML代码

AngularJs

预览图像的Javascript代码：

<html ng-app="SuperAdmin">
    <div ng-controller="PlotsController">
        <form action="#" class="form-horizontal" name="myPlotsForm" novalidate>
            <select ng-model="VentureName" required>
              <option ng-selected="false" value="">Select Venture</option>
            </select>
            <input type="text" required ng-model="PlotNo" />
            <textarea required cols="10" rows="5" ng-model="PlotDescription"></textarea>
            <input id="images" type="file" name="images[]" multiple />
             <div id="images-to-upload" class="col-md-8"></div>
            <button type="submit" ng-click="SavePlots(myPlotsForm.$valid,$files)">Save</button>
         </form>
    </div>
</html>

用于保存/发送输入数据并尝试保存图像的AngularJs：

var fileCollection = new Array();
        $('#images').on('change', function (e) {
            var files = e.target.files;
            var cnt = files.length;
            $('#images-to-upload').html('');
            if (cnt <= 5) {
                $.each(files, function (i, file) {

                    fileCollection.push(file);
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        var templated = '<div id="imgPreView' + i + '" class="popup col-md-2">&nbsp;&nbsp;&nbsp;' +
                            '<img class="img-responsive" id="targetImg' + i + '" src="' + e.target.result + '"/> ' +
                            '<div class="caption">' +
                            '<a href="#"><i class="fa fa-trash-o"></i></a>' +
                            '<span id="description"></span>' +
                            '</div>' +
                            '</div>';
                            $('#images-to-upload').append(templated);
                }
            else {
                alert('Images selection should not more than 5.');
            }

        });

如何通过angularjs ng-click保存带有输入数据的网格图像？

0 个答案: