使用angular JS和ASP.NET MVC的文件附件(上传和下载)

时间:2017-01-06 10:18:16

标签: javascript jquery angularjs asp.net-mvc file-upload

我对如何使用AngularJs和Asp.net MVC上传和下载文件感到困惑。我已经尝试了很多但没有完成任务。我尝试了不同的方法论,其中一个是

错误是:

angular.js:21448 WARNING: Tried to load angular more than once.
require.js:1895 GET http://localhost:11954/FileUploadController.js 
req.load @ require.js:1895
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
require.js:166 Uncaught Error: Script error for: FileUploadController
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
appPage.html:258 Uncaught TypeError: Cannot read property 'style' of null
    at appPage.html:258
(anonymous) @ appPage.html:258

这是我的Javascript代码:

"use strict";

define(['application-configuration' ,'FileUploader','accountsService', 'alertsService'], function (app) {

app.register.controller('AppController', ['$scope', '$rootScope', 'FileUploadController', 'accountsService', 'alertsService',
function ($scope, $rootScope, FileUploader, accountsService, alertsService) {

    alert('File Upload');
    var uploader = $scope.uploader = new FileUploader({
        url: window.location.protocol + '//' + window.location.host + window.location.pathname + '/api/Upload/UploadFile'
    });

    // FILTERS

    uploader.filters.push({

        name: 'extensionFilter',
        fn: function (item, options) {
            debugger;
            var filename = item.name;
            var extension = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
            if (extension == "pdf" || extension == "doc" || extension == "docx" || extension == "rtf")
                return true;
            else {
                alert('Invalid file format. Please select a file with pdf/doc/docs or rtf format and try again.');
                return false;
            }
        }
    });

    uploader.filters.push({
        name: 'sizeFilter',
        fn: function (item, options) {
            debugger;
            var fileSize = item.size;
            fileSize = parseInt(fileSize) / (1024 * 1024);
            if (fileSize <= 20)
                return true;
            else {
                alert('Selected file exceeds the 20MB file size limit. Please choose a new file and try again.');
                return false;
            }
        }
    });

    uploader.filters.push({
        name: 'itemResetFilter',
        fn: function (item, options) {
            debugger;
            if (this.queue.length < 20)
                return true;
            else {
                alert('You have exceeded the limit of uploading files.');
                return false;
            }
        }
    });

    // CALLBACKS

    uploader.onWhenAddingFileFailed = function (item, filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
    };
    uploader.onAfterAddingFile = function (fileItem) {
        debugger;
        alert('Files ready for upload.');
    };

    uploader.onSuccessItem = function (fileItem, response, status, headers) {
        debugger;
        $scope.uploader.queue = [];
        $scope.uploader.progress = 0;
        alert('Selected file has been uploaded successfully.');
    };
    uploader.onErrorItem = function (fileItem, response, status, headers) {
        debugger;
        alert('We were unable to upload your file. Please try again.');
    };
    uploader.onCancelItem = function (fileItem, response, status, headers) {
        debugger;
        alert('File uploading has been cancelled.');
    };

    uploader.onAfterAddingAll = function (addedFileItems) {
        debugger;
        console.info('onAfterAddingAll', addedFileItems);
    };
    uploader.onBeforeUploadItem = function (item) {
        debugger;
        console.info('onBeforeUploadItem', item);
    };
    uploader.onProgressItem = function (fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
    };
    uploader.onProgressAll = function (progress) {
        console.info('onProgressAll', progress);
    };

    uploader.onCompleteItem = function (fileItem, response, status, headers) {
        debugger;
        console.info('onCompleteItem', fileItem, response, status, headers);
    };
    uploader.onCompleteAll = function () {
        console.info('onCompleteAll');
    };

    console.info('uploader', uploader);


    }]);
});

多数民众赞成。谁能发现错误?

0 个答案:

没有答案