Как вызвать метод контроллера при загрузке файлов с помощью Angularjs Webapi

Question

Как вызвать метод контроллера при загрузке файлов с помощью Angularjs Webapi

0

Я пытаюсь загрузить несколько файлов с помощью Angularjs и webapi. Это моя таблица html:

<body ng-app="fupApp">

    <div ng-controller="fupController">
        <input type="file" id="file" name="file" multiple
               onchange="angular.element(this).scope().getFileDetails(this)" />

        <input type="button" ng-click="uploadFiles()" value="Upload" />

        <!--ADD A PROGRESS BAR ELEMENT.-->
        <p><progress id="pro" value="0"></progress></p>
    </div>

</body>

Вот мой код Angularjs для загрузки нескольких файлов (fileupload.js):

var myApp = angular.module('fupApp', []);

myApp.controller('fupController', function ($scope) {

    // GET THE FILE INFORMATION.
    $scope.getFileDetails = function (e) {
        debugger;
        $scope.files = [];
        $scope.$apply(function () {
            debugger;
            // STORE THE FILE OBJECT IN AN ARRAY.
            for (var i = 0; i < e.files.length; i++) {
                $scope.files.push(e.files[i])
            }

        });
    };

    // NOW UPLOAD THE FILES.
    $scope.uploadFiles = function () {
        debugger;
        //FILL FormData WITH FILE DETAILS.
        var data = new FormData();

        for (var i in $scope.files) {
            data.append("uploadedFile", $scope.files[i]);
        }

        // ADD LISTENERS.
        var objXhr = new XMLHttpRequest();
        objXhr.addEventListener("progress", updateProgress, false);
        objXhr.addEventListener("load", transferComplete, false);

        // SEND FILE DETAILS TO THE API.
       objXhr.open("POST","MailRoute/getDataForUploadFiles");

        objXhr.send(data);
    }

    // UPDATE PROGRESS BAR.
    function updateProgress(e) {
        debugger;
        if (e.lengthComputable) {
            document.getElementById('pro').setAttribute('value', e.loaded);
            document.getElementById('pro').setAttribute('max', e.total);
        }
    }

    // CONFIRMATION.
    function transferComplete(e) {
        debugger;
        alert("Files uploaded successfully.");
    }
});

вот моя функция в webapi:

 public async Task<HttpResponseMessage> getDataForUploadFiles()
                {
                 }

но как прочитать файл deatils и получить доступ к данным файла из метода контроллера (getDataForUploadFiles)

Manoj Maharana 28 июль 2016, в 12:25

Источник

0

вы получаете файлы в объекте $scope.files ?
Venky 28 июль 2016, в 13:57
0

Вы указали Route как getDataForUploadFiles и вызвали objXhr.open("POST", "/file_upload"); Что явно не так.
Venky 28 июль 2016, в 13:58
0

Вы можете использовать функции angularjs для загрузки файлов для удобства. stackoverflow.com/questions/24443246/...
Venky 28 июль 2016, в 14:00
0

нет маршрут правильный .. как читать данные в функции webapi ????
Manoj Maharana 28 июль 2016, в 14:18
0

Что бы вы ни делали, это правильно. Вы должны проверить data есть объект инициализации данных и GetAllInbox имеет те же типы недвижимости как data объекта. Тогда происходит только отображение.
Venky 28 июль 2016, в 15:05
0

где кнопка добавления? Я уже добавил кнопку <input type = "button" ng-click = "save ()" value = "Upload" />, но это не относится к методу сохранения
Manoj Maharana 29 июль 2016, в 09:24

Показать ещё 4 комментария

Теги:

c#

angularjs

asp.net-web-api2

1 ответ

Ещё вопросы

вы получаете файлы в объекте $scope.files ?
Вы указали Route как getDataForUploadFiles и вызвали objXhr.open("POST", "/file_upload"); Что явно не так.
Вы можете использовать функции angularjs для загрузки файлов для удобства. stackoverflow.com/questions/24443246/...
нет маршрут правильный .. как читать данные в функции webapi ????
Что бы вы ни делали, это правильно. Вы должны проверить data есть объект инициализации данных и GetAllInbox имеет те же типы недвижимости как data объекта. Тогда происходит только отображение.
где кнопка добавления? Я уже добавил кнопку <input type = "button" ng-click = "save ()" value = "Upload" />, но это не относится к методу сохранения

Venky · Answer 1 · 2016-07-28T13-33-00.000Z

Попробуй это

  <div ng-controller="Ctrl">
    <input type="file" file-upload multiple/>
    <ul>
        <li ng-repeat="file in files">{{file.name}}</li>
    </ul>
  </div>

Код контроллера

function Ctrl($scope, $http) {

    //a simple model to bind to and send to the server
    $scope.model = {
        name: "",
        comments: ""
    };

    //an array of files selected
    $scope.files = [];

    //listen for the file selected event
    $scope.$on("fileSelected", function (event, args) {
        $scope.$apply(function () {            
            //add the file object to the scope files collection
            $scope.files.push(args.file);
        });
    });

    //the save method
    $scope.save = function() {
        $http({
            method: 'POST',
            url: "/MailRoute/getDataForUploadFiles",
            //IMPORTANT!!! You might think this should be set to 'multipart/form-data' 

            headers: { 'Content-Type': false },

            transformRequest: function (data) {
                var formData = new FormData();

                formData.append("model", angular.toJson(data.model));
                //now add all of the assigned files
                for (var i = 0; i < data.files; i++) {
                    //add each file to the form data and iteratively name them
                    formData.append("file" + i, data.files[i]);
                }
                return formData;
            },
            //Create an object that contains the model and files which will be transformed
            // in the above transformRequest method
            data: { model: $scope.model, files: $scope.files }
        }).
        success(function (data, status, headers, config) {
            alert("success!");
        }).
        error(function (data, status, headers, config) {
            alert("failed!");
        });
    };
};

Обработка серверной части данных

public async Task<HttpResponseMessage> getDataForUploadFiles()
{
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    }

    var root = HttpContext.Current.Server.MapPath("~/App_Data/Temp/FileUploads");
    Directory.CreateDirectory(root);
    var provider = new MultipartFormDataStreamProvider(root);
    var result = await Request.Content.ReadAsMultipartAsync(provider);
    if (result.FormData["model"] == null)
    {
        throw new HttpResponseException(HttpStatusCode.BadRequest);
    }

    var model = result.FormData["model"];
    //TODO: Do something with the json model which is currently a string



    //get the files
    foreach (var file in result.FileData)
    {                
        //TODO: Do something with each uploaded file
    }

    return Request.CreateResponse(HttpStatusCode.OK, "success!");
}

xhr.setRequestHeader ("Content-Type", "multipart / form-data"); xhr.setRequestHeader ("X-File-Name", uf.name); не работает
Убедитесь, что ваш API поддерживает CORS, а авторизация - это разрешенный заголовок запроса. Когда вы отправляете запрос OPTIONS конечной точке, ваш API должен ответить следующими заголовками ответа:
также попробуйте изменить Content-Type на content-type хотя они не case-insensitive . Стоит попробовать.
после написания метода, подобного этому, публичная асинхронная задача <HttpResponseMessage> getDataForUploadFiles () {}
это идет к контроллеру с моим кодом var objXhr = new XMLHttpRequest (); objXhr.addEventListener ("progress", updateProgress, false); objXhr.addEventListener ("загрузка", TransferComplete, false); // ОТПРАВИТЬ ФАЙЛ ДЕТАЛИ В API. objXhr.open ( "ПОСТ", "MailRoute / getDataForUploadFiles"); objXhr.send (данные);
но я не понимаю, как читать файлы и получать файлы
Вы делаете что-то не так здесь. 1. положить файлы в объект data . Что не требуется, поскольку webapi может принимать несколько файлов напрямую. 2. Вы не используете традиционную функцию angular upload . Который прост и 2 -3 строки кода. Я привел пример в предыдущих комментариях.
Можете ли вы опубликовать правильный ответ здесь ???
Давайте продолжим эту дискуссию в чате .
где кнопка добавления? Я уже добавил кнопку <input type = "button" ng-click = "save ()" value = "Upload" />, но это не относится к методу сохранения