Question

是Angular的新手，我尝试使用angular 1实现徽标上传。选择文件后，如果我点击了上传，则其显示为未定义。请帮忙。

这是我的HTML代码：

 <input type="file" data-file-model="organisationCtrl.filesArray" >
                        <button type="submit" data-ng-click="organisationCtrl.uploadFile()">save</button>

这里是角部分： //主控制器：

(function() {
    'use strict';
    angular.module('vyahara').controller('OrganisationCtrl', OrganisationCtrl);
    // The $inject property is an array of service names to inject.
    OrganisationCtrl.$inject = [ '$http', '$window', '$location',  '$rootScope',
            'GenericPostService' ];
    function OrganisationCtrl($http, $window, $location, $rootScope,
            GenericPostService) {
        var organisationCtrl = this;

// UserName验证（出于理解），可以正常工作：

organisationCtrl.validUser = validUser;
        function validUser()
        {
            console.log("sdagfsdfgsdfgsdfgsdfgsdfg");
            if (organisationCtrl.userName != null
                    && organisationCtrl.userName != "") {
                if (organisationCtrl.userName.length < 8) {
                    swal('', 'User Id must have 8-15 Chracters', 'warning');
                    organisationCtrl.userName = "";
                }
                var userCreationBean = {
                    "userCreationBean" : {
                        userNumber : organisationCtrl.userName,
                    }
                }
                GenericPostService
                        .post('/user/valid/search', userCreationBean)
                        .then(
                                function(response) {
                                    if (response.statusCode == 200) {
                                        swal('', 'User Name Already Taken',
                                                'warning');
                                        organisationCtrl.userName = "";

                                    } else {
                                        organisationCtrl.userName = organisationCtrl.userName;
                                    }

                                });

            }
        }

//文件上传不起作用

organisationCtrl.uploadFile = uploadFile;
        function uploadFile() {

                var fileUpload = new FormData();
                console.log("You are In!!!!",organisationCtrl.filesArray);
                fileUpload.append("fileUpload", organisationCtrl.filesArray);
                console.log(">>>>>>>>>>",fileUpload);
                GenericPostService.postWithConfig('/organization/createFile',  fileUpload, {
                    transformRequest: angular.identity,
                    headers: {'Content-Type': undefined}
                })
                .then(
                        function(response) {
                            if (response.statusCode == 200) {
                                swal('', 'File Upload Successful');

}）;

Answer 1

有许多Angularjs模块可以执行文件上传，您只需要在代码中包含它们即可，这样就不会使代码复杂化。您可以参考以下链接：

https://github.com/leon/angular-upload

https://github.com/nervgh/angular-file-upload/

https://github.com/danialfarid/ng-file-upload

https://github.com/radify/angular-file

http://www.folio3.com/blog/angularjs-file-upload-example-tutorial/

或者您可以直接通过->

npm install ng-file-upload

包括一些脚本标签

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>


Upload on form submit or button click
<form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
  Single Image with validations
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
    ngf-resize="{width: 100, height: 100}">Select</div>
  Multiple files
  <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
  Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>

Upload right away after file selection:
<div class="button" ngf-select="upload($file)">Upload on file select</div>
<div class="button" ngf-select="uploadFiles($files)" multiple="multiple">Upload on file select</div>
  Drop File:
<div ngf-drop="uploadFiles($files)" class="drop-box"
  ngf-drag-over-class="'dragover'" ngf-multiple="true" 
  ngf-pattern="'image/*,application/pdf'">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'">
Audio preview: <audio controls ngf-src="file"></audio>
Video preview: <video controls ngf-src="file"></video>

没有$ scope的情况下使用angularjs上传文件

1 个答案: