文件上传Jquery WebApi

 陈尧倩682 发布于 2023-01-29 22:42

我使用以下代码将文件上传到服务器,但文件未上传.

HTML:

      

使用Javascript:

     // Hook into the form's submit event.
    $('#upload').submit(function () {

        // To keep things simple in this example, we'll
        // use the FormData XMLHttpRequest Level 2 object (which
        // requires modern browsers e.g. IE10+, Firefox 4+, Chrome 7+, Opera 12+ etc).
        var formData = new FormData();

        // We'll grab our file upload form element (there's only one, hence [0]).
        var opmlFile = $('#opmlFile')[0];

        // If this example we'll just grab the one file (and hope there's at least one).
        formData.append("opmlFile", opmlFile.files[0]);

        // Now we can send our upload!
        $.ajax({
            url: 'api/upload', // We'll send to our Web API UploadController
            data: formData, // Pass through our fancy form data

            // To prevent jQuery from trying to do clever things with our post which
            // will break our upload, we'll set the following to false
            cache: false,
            contentType: false,
            processData: false,

            // We're doing a post, obviously.
            type: 'POST',

            success: function () {
                // Success!
                alert('Woot!');
            }
        });

        // Returning false will prevent the event from
        // bubbling and re-posting the form (synchronously).
        return false;
    });

所述控制器如下:

         using System;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

class UploadController : ApiController
{
    public async void Post()
    {
        if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable, "This request is not properly formatted"));
        }

        // We'll store the uploaded files in an Uploads folder under the web app's App_Data special folder
        var streamProvider = new MultipartFormDataStreamProvider(HttpContext.Current.Server.MapPath("~/App_Data/Uploads/"));

        // Once the files have been written out, we can then process them.
        await Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(t =>
        {
            if (t.IsFaulted || t.IsCanceled)
            {
                throw new HttpResponseException(HttpStatusCode.InternalServerError);
            }

            // Here we can iterate over each file that got uploaded.
            foreach (var fileData in t.Result.FileData)
            {
                // Some good things to do are to check the MIME type before we do the processing, e.g. for XML:
                if (fileData.Headers.ContentType.MediaType.Equals("text/xml", StringComparison.InvariantCultureIgnoreCase))
                {
                    // And this is how we can read the contents (note you would probably want to do this asychronously
                    // but let's try keep things simple for now).
                    string contents = File.ReadAllText(fileData.LocalFileName);
                }
            }
        });
    }
}

操作命中,但文件未上传.

1 个回答
  • 您可以尝试使用普通按钮代替提交按钮 -

    <form enctype="multipart/form-data">
        <label>
            Using JQuery
        </label>
        <input name="file" type="file" id="me" />
        <input type="button" id="Upload" value="Upload" />
    </form>
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#Upload').click(function () {
                var formData = new FormData();
                var opmlFile = $('#me')[0];
                formData.append("opmlFile", opmlFile.files[0]);
    
                $.ajax({
                    url: 'http://localhost:23133/api/file',
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });
        });
    </script>
    

    控制器动作 -

        public HttpResponseMessage Post()
        {
            HttpResponseMessage result = null;
            var httpRequest = HttpContext.Current.Request;
    
            // Check if files are available
            if (httpRequest.Files.Count > 0)
            {
                var files = new List<string>();
    
                // interate the files and save on the server
                foreach (string file in httpRequest.Files)
                {
                    var postedFile = httpRequest.Files[file];
                    var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName);
                    postedFile.SaveAs(filePath);
    
                    files.Add(filePath);
                }
    
                // return result
                result = Request.CreateResponse(HttpStatusCode.Created, files);
            }
            else
            {
                // return BadRequest (no file(s) available)
                result = Request.CreateResponse(HttpStatusCode.BadRequest);
            }
    
            return result;
        }
    

    输出 -

    在此输入图像描述

    2023-01-29 23:00 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有