文件上传Jquery WebApi

前端之家收集整理的这篇文章主要介绍了文件上传Jquery WebApi前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用以下代码文件上传到服务器,但该文件上传.

HTML

<form id="upload">
        <div>
            <label for="myFile"></label>
            <div>
                <input type="file" id="myFile" />
            </div>
        </div>
        <button type="submit">Upload</button>
    </form>

使用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);
                }
            }
        });
    }
}

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

解决方法

而不是提交按钮,你可以尝试使用普通按钮 –
<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,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;
    }

输出

猜你在找的jQuery相关文章