将文件对象从Javascript传递给Web API [英] Passing file object to Web API from Javascript

问题描述

我试图从本地机上传文件到通过web api从Javscript web api调用的共享点。试图从JavaScript传递文件对象到Web API，但我一直在得到像类型错误，资源未找到的错误等任何人都可以在这方面的帮助。
$ b

Javascript代码：

  $ scope.Upload = function（）{
 if（！window.FileReader）{
 alert （此浏览器不支持HTML5文件API）; 
 return; 
} 
 
 var element = document.getElementById（uploadInput）; 
 var file = element.files [0]; 
 // var folderStructure =/ PublishingImages / Lists / Featured％20Stories /; 
 var parts = element.value.split（\\）; 
 var fileName = parts [parts.length  -  1]; 
 filename1 = fileName; 
 var descriptionName = fileName; 
 var reader = new FileReader（）; 
 var indentifier =''; 
 
 // url = encodeURI（url）; 
 reader.onload = function（e）{
 UploadDocs（e.target.result，fileName）; 
 
 reader.onerror = function（e）{
 alert（e.target.error）; 
} 
 reader.readAsArrayBuffer（file）; 
 
 
 $ b函数UploadDocs（str，file）{
 var url = webApiUrl +api / Registration / UploadFileToDocmentLibrary; 
 $ .ajax（{
 type：POST，
 url：url，
 contentType：'application / json; charset = utf-8'，
 data ：JSON.stringify（str），
 dataType：'json'，
 async：false，
 
成功：函数（响应）{
 console.log（response .fileData）; 
 console.log（'Success'）; 
}，
 error：function（data）{
 console.log（'fail'）; 
} 
 
}）; 
 
  

Web API代码：

  [HttpPost] //这是来自System.Web.Http，而不是System。 Web.Mvc 
 public void UploadFileToDocmentLibrary（HttpPostedFile uploadFile）
 {
 //上传到sharepoint的代码
} 
  

解决方案

您可以使用 FormData

上载整个文件。 b
$ b

JS：

  $ scope.uploadDocs = function（）{
 var element = document.getElementById（uploadInput）; 
 var file = element.files [0]; 
 
 var loFormData = new FormData（）; 
 loFormData.append（filename，file.name）; 
 loFormData.append（file，file）; 
 $ b $ var loAjaxRequest = $ .ajax（{
 cache：false，
 type：'POST'，
 url：webApiUrl +api / Registration / UploadFileToDocmentLibrary， 
 contentType：false，
 processData：false，
 data：loFormData 
}）; 
 
 loAjaxRequest.done（函数（xhr，textStatus）{
 alert（textStatus）; 
}）; 
}; 
  

Web-Api：

  [HttpPost] 
 public async Task< HttpResponseMessage> UploadFileToDocmentLibrary（）
 {
 if（！this.Request.Content.IsMimeMultipartContent（））
 throw new HttpResponseException（HttpStatusCode.UnsupportedMediaType）; 
尝试
 {
 var loProvider = new MultipartFormDataStreamProvider（Path.GetTempPath（））; 
 
等待Request.Content.ReadAsMultipartAsync（loProvider）; 
 
 string lsFilename = loProvider.FormData.GetValues（filename）。First（）; 
 var loFile = loProvider.FileData.First（）; 
 string lsFileContent = File.ReadAllText（loFile.LocalFileName）; 
 
返回新的HttpResponseMessage（HttpStatusCode.OK）; 
 
 catch（Exception exp）
 {
 return this.Request.CreateErrorResponse（HttpStatusCode.InternalServerError，exp）; 
} 
} 
  

I am trying to upload file from my local machine to sharepoint through web api from Javscript web api call. Tried to pass file object from javascript to web api but i am keep on getting errors like Type error, resource not found etc. Can anyone help on this.

Javascript code:

 $scope.Upload = function () {
        if (!window.FileReader) {
            alert("This browser does not support the HTML5 File APIs");
            return;
        }

        var element = document.getElementById("uploadInput");
        var file = element.files[0];
        //var folderStructure = "/PublishingImages/Lists/Featured%20Stories/";
        var parts = element.value.split("\\");
        var fileName = parts[parts.length - 1];
        filename1 = fileName;
        var descriptionName = fileName;
        var reader = new FileReader();
        var indentifier = '';

        //url = encodeURI(url);
        reader.onload = function (e) {
            UploadDocs(e.target.result, fileName);
        }
        reader.onerror = function (e) {
            alert(e.target.error);
        }
        reader.readAsArrayBuffer(file);

    }

    function UploadDocs(str, file) {
        var url = webApiUrl + "api/Registration/UploadFileToDocmentLibrary";
        $.ajax({
            type: "POST",
            url: url,
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(str),
            dataType: 'json',
            async: false,

            success: function (response) {
                console.log(response.fileData);
                console.log('Success');
            },
            error: function (data) {
                console.log('fail');
            }

        });
    }

Web API code:

[HttpPost] // This is from System.Web.Http, and not from System.Web.Mvc
    public void UploadFileToDocmentLibrary(HttpPostedFile uploadFile)
    {
//code to upload to sharepoint
}

解决方案

You can upload the whole file with FormData

JS:

$scope.uploadDocs = function () {
    var element = document.getElementById("uploadInput");
    var file = element.files[0];

    var loFormData = new FormData();
    loFormData.append("filename", file.name);
    loFormData.append("file", file);

    var loAjaxRequest = $.ajax({
        cache: false,
        type: 'POST',
        url: webApiUrl + "api/Registration/UploadFileToDocmentLibrary",
        contentType: false,
        processData: false,
        data: loFormData
    });

    loAjaxRequest.done(function (xhr, textStatus) {
        alert(textStatus);
    });
};

Web-Api:

[HttpPost]
public async Task<HttpResponseMessage> UploadFileToDocmentLibrary()
{
    if (!this.Request.Content.IsMimeMultipartContent())
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    try
    {
        var loProvider = new MultipartFormDataStreamProvider(Path.GetTempPath());

        await Request.Content.ReadAsMultipartAsync(loProvider);

        string lsFilename = loProvider.FormData.GetValues("filename").First();
        var loFile = loProvider.FileData.First();
        string lsFileContent = File.ReadAllText(loFile.LocalFileName);             

        return new HttpResponseMessage(HttpStatusCode.OK);
    }
    catch (Exception exp)
    {
        return this.Request.CreateErrorResponse(HttpStatusCode.InternalServerError, exp);
    }
}

这篇关于将文件对象从Javascript传递给Web API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！