AJAX 图像上传 MVC4 ASP.Net 不起作用答案

【问题标题】：AJAX image upload MVC4 ASP.Net not workingAJAX 图像上传 MVC4 ASP.Net 不起作用
【发布时间】：2014-03-11 14:41:15
【问题描述】：

下面是我的 MVC4 ASP.Net 应用程序的 AJAX 图像上传的相关代码部分。但是，当我单击上传链接时，它只是在我的 URL 链接的末尾附加了一个 #，因此 http://localhost:10991/StoreManager/Create# 并转到页面顶部。

在调试器或控制台窗口中我看不到任何错误。

我已经使用了这里的代码

http://powerdotnetcore.com/asp-net-mvc/asp-net-mvc-simple-ajax-file-upload-using-jquery

_部分视图

   @model SwitchClothing.Models.Image

   <script src="~/Scripts/jquery-2.1.0.min.js"></script>
   <script src="~/Scripts/jquery-ui-1.10.4.js"></script>
   <script src="~/Scripts/jquery.validate.min.js"></script>
   <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
   <script src="~/Scripts/FileUpload/jquery.fileupload.js"></script>
   <script src="~/Scripts/FileUpload/jquery.fileupload-ui.js"></script>
   <script src="~/Scripts/FileUpload/jquery.iframe-transport.js"></script>
   <script src="~/Scripts/upload.js"></script>


   <div class="well">
       <div>
           <h1>Upload by click</h1>
       </div>
       <div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-simple-upload", type = "file" }) &nbsp;<a href="#" id="hl-start-upload">Start upload</a> </div>
   </div>

上传.js

    var jqXHRData;

$(document).ready(function () {

    initSimpleFileUpload();

    $("#hl-start-upload").on('click', function () {
        if (jqXHRData) {
            jqXHRData.submit();
        }
        return false;
    });

});

function initSimpleFileUpload() {
    'use strict';

    $('#fu-my-simple-upload').fileupload({
        url: '/File/UploadFile',
        dataType: 'json',
        add: function (e, data) {
            jqXHRData = data
        },
        done: function (event, data) {
            if (data.result.isUploaded) {

            }
            else {

            }
            alert(data.result.message);
        },
        fail: function (event, data) {
            if (data.files[0].error) {
                alert(data.files[0].error);
            }
        }
    });
}

控制器动作

[HttpPost]
        public virtual ActionResult UploadFile()
        {
            HttpPostedFileBase myFile = Request.Files["MyFile"];
            bool isUploaded = false;
            string message = "File upload failed";

            if (myFile != null && myFile.ContentLength != 0)
            {
                string pathForSaving = Server.MapPath("~/Images");
                if (this.CreateFolderIfNeeded(pathForSaving))
                {
                    try
                    {
                        myFile.SaveAs(Path.Combine(pathForSaving, myFile.FileName));
                        isUploaded = true;
                        message = "File uploaded successfully!";
                    }
                    catch (Exception ex)
                    {
                        message = string.Format("File upload failed: {0}", ex.Message);
                    }
                }
            }
            return Json(new { isUploaded = isUploaded, message = message }, "text/html");
        }

        private bool CreateFolderIfNeeded(string path)
        {
            bool result = true;
            if (!Directory.Exists(path))
            {
                try
                {
                    Directory.CreateDirectory(path);
                }
                catch (Exception)
                {
                    /*TODO: You must process this exception.*/
                    result = false;
                }
            }
            return result;
        }

在模型视图的创建页面中渲染局部视图

@RenderPage("_Upload.cshtml")

【问题讨论】：

标签： jquery asp.net ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

如果你想做上传功能，我认为你应该把<input type='file' />放在一个html表单中。因为表单需要 enctype="multipart/form-data" 属性来上传文件。

<form id="ajaxUploadForm" action="/Import" method="post" enctype="multipart/form-data">
         <div class="entry-form">
                <div class="editor">
                    <div class="editor-label">
                        File:
                    </div>
                    <div class="editor-field">
                       <input id="import-file" type="file" name="file" />
                       <input type="submit" class="btn" value="Submit" />       
                    </div>
                    <div class="clear">
                    </div>
                </div>                      
          </div>   
</form>

上传js可以是：

 // Upload file and import
$("#ajaxUploadForm").ajaxForm({
    iframe: true,
    type: 'POST',
    dataType: "json",
    cache: false,
    timeout: 1200000,
    async: false,        
    success: function (result) {            
       // do something when successfully
    },
    error: function (xhr, textStatus, errorThrown) {
       // do something when error
    }
});

还有Controller Action，可能和你的代码类似。

干杯。

【讨论】：