Question

下面我有我的MVC4 ASP.Net应用程序上传AJAX图像的相关代码部分。但是，当我点击上传链接时，只需将＃添加到我的网址链接的末尾即http://localhost:10991/StoreManager/Create#，然后转到页面顶部。

我可以看到调试器或控制台窗口中出现的错误。

我使用了这里的代码

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

_PartialView

   @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>

Upload.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")

Answer 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
    }
});

和控制器操作，它可能类似于您的代码。

干杯。

AJAX图像上传MVC4 ASP.Net无法正常工作

1 个答案: