jQuery+Ajax+WebAPIアップロードファイル

HTML 5ではAjaxでファイルをアップロードできるようになっており、コードは非常に簡単で、FormDataクラスでファイルデータを送信することができます.
フロントエンドコード:

<p><input type="file" id="upfile">p>
<p><input type="button" id="upJS" value="   JS  ">p>
<p><input type="button" id="upJQuery" value=" jQuery  ">p>

<script>
    //   JS 
    document.getElementById("upJS").onclick = function () {
        /* FormData        */
        var fd = new FormData();
        var ajax = new XMLHttpRequest();
        fd.append("upload", 1);
        /*           */
        fd.append("upfile", document.getElementById("upfile").files[0]);
        ajax.open("post", "/api/Upload", true);

        ajax.onload = function () {
            console.log(ajax.responseText);
        };

        ajax.send(fd);
    }

    // jQuery 
    $('#upJQuery').on('click', function () {
        var fd = new FormData();
        fd.append("upload", 1);
        fd.append("upfile", $("#upfile").get(0).files[0]);
        $.ajax({
            url: "/api/Upload",
            type: "POST",
            processData: false,
            contentType: false,
            data: fd,
            success: function (d) {
                console.log(d);
            }
        });
    });
script>

バックグラウンドコード:using System; using System.IO; using System.Web; using System.Web.Http; namespace ASP.NET_MVC_study.WepApi { public class UploadController : ApiController { private string uploadPath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "Upload/"; /// /// /// /// URL， public string Post() { string result = string.Empty; string imgPath = string.Empty; HttpRequest request = System.Web.HttpContext.Current.Request; HttpFileCollection fileCollection = request.Files; // if (fileCollection.Count > 0) { // HttpPostedFile httpPostedFile = fileCollection[0]; // string fileExtension = Path.GetExtension(httpPostedFile.FileName); // string fileName = Guid.NewGuid().ToString() + fileExtension; // string filePath = uploadPath + fileName; // if (fileExtension.Contains(".jpg") || fileExtension.Contains(".png") || fileExtension.Contains(".bmp")) { // if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } // while (File.Exists(filePath)) { fileName = Guid.NewGuid().ToString() + fileExtension; filePath = uploadPath + fileName; } httpPostedFile.SaveAs(filePath); // SaveUploadFileInfo(fileName, filePath); // URL imgPath = Setting.ServerIP + Setting.PhotoPath + fileName; result = imgPath; } else { result = " jpg/png/bmp "; } } else { result = " ！"; } return result; } } }
参考記事:HTML 5でjQuery+Ajaxでファイルをアップロード