Question

我是angularjs的新手，我正在尝试克隆div并获取克隆div的数据，我成功克隆了div但我发现很难从克隆的div获取数据（文件）帮助我排序出来。

HTML

<div class="form-group last">                           
    <div ng-repeat="input in inputs track by $index" class="col-md-3">
        <div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden" value="" name="">
            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                <img src="img/catalog-no-image.png" alt="">
            </div>
            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 10px;"></div>
            <div>
                <span class="btn btn-white btn-file">
                    <span class="fileupload-new btn-sm"><i class="fa fa-paper-clip"></i> Select image</span>
                    <span class="fileupload-exists btn-sm"><i class="fa fa-undo"></i> Change</span>
                    <input type="file" class="default" name="image_file" file-model="myFile" custom-on-change="loadFileData($file)" multiple="true">
                </span>
                <button class="btn btn-danger btn-sm fileupload-exists" id="removeImage" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</button>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <span class="label label-danger">NOTE!</span>
        <span>
        Attached image thumbnail is
        supported in Latest Firefox, Chrome, Opera,
        Safari and Internet Explorer 10 only
        </span>
    </div>
</div>
<div class="col-md-12">
    <button class="btn btn-success" type="button" id="add" ng-click="add()">Add</button>
</div>

app.js

.controller('productUploadCtrl', ['$scope', 'fileUpload', '$routeParams', '$http', '$compile', 'toastr', function($scope, fileUpload, $routeParams, $http, $compile, toastr) {
    $('#group_selection').select2();

    $scope.uploadFile = function(clear, pattern) {
        $scope.myFile = [];
        $scope.loadFileData = function(files) {
            console.log(files);
            console.log($scope.fileModel);
            $scope.files = files;
        };
        var file = $scope.myFile;
        console.log(file);
        //alert(file);
        var id_product = $routeParams.productId;
        var uploadUrl = "cataloglog-ajax.php";
        fileUpload.uploadFileToUrl(file, uploadUrl, id_product, clear, $scope, pattern);
    };

$scope.inputCounter = 0;
$scope.inputs = [{
  id: 'image-duplicate'
}];
$scope.add = function() {
  $scope.inputTemplate = {
    id: 'input-' + $scope.inputCounter,
    name: ''
  };
  $scope.inputCounter += 1;
  $scope.inputs.push($scope.inputTemplate);
};
app.directive('customOnChange', function($parse) {
  return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {
        var fn = $parse(attrs.onReadFile);

        element.on('change', function(onChangeEvent) {
            var reader = new FileReader();

            reader.onload = function(onLoadEvent) {

                scope.$apply(function() {
                    fn(scope, {$fileContent:onLoadEvent.target.result});
                });

            };


            reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);

            //Get the Uploaded file mime type 
            mimeType=(onChangeEvent.srcElement || onChangeEvent.target).files[0].type;
            fileName=(onChangeEvent.srcElement || onChangeEvent.target).files[0].name;

        });
    }
};

}）

Answer 1

看看这个答案 Upload multiple files in angular和此处的掠夺者http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview

为了实现目标，你唯一需要改变的是移动

var values = [];

在bind函数之外，所以它将是

var values = []; element.bind('change', function () {

否则你将无法一个接一个地选择文件，只能以多种方式，一次几个。

如何在angularjs中获取克隆的div数据

1 个答案: