为什么我在Chrome中发回的邮件无法刷新我的页面

Question

I have a postback that should refresh my page and reload page. When the page reloads it should display an image or an uploaded link or an uploaded document link or something. This works great when I run locally, but when I have deployed the same code to my host server, the page reloads with blanks, and the user must hit refresh to see the results. the following code snippet asks the user to upload an image, and then performs an update:

markup:

  <form id="updateLogo" enctype="multipart/form-data">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <h5 class="red"><b>(Image sizes are limited to 1 Megabyte)</b></h5>
                        Select File:
                        <input class="form-control" type="file" name="file" id="file" required="required" />
                        <input class="form-control" type="hidden" name="communityId" id="communityId" value="@ViewBag.CommunityId" />
                    </div>
                    <div class="col-lg-6 col-md-12">
                        Current Profile Image:
                        <img src="@ViewBag.LogoImage" class="img-responsive img-circle" style="width:150px; height:150px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <input type="submit" value="Upload Image" class="btn btn-habitat" id="updtLogo">
                    </div>
                </div>
            </div>
        </form>

javascript with ajax :

$("#updtLogo").click(function () { // Host

    var hostname = location.hostname;
    var host = '@System.Configuration.ConfigurationManager.AppSettings["hostroot"]';
    if (hostname == "localhost")
        host = "";

    // New Form data including the newly uploaded file
    var formSerialized = $("#updateLogo").serializeArray();
    var formdata = new FormData();

    var logofile = $("#file")[0].files[0];

    // Supporting Assets (i.e. uploaded files go here)
    for (i = 0; i < $("#file")[0].files.length; i++) {
        formdata.append("File", $("#file")[0].files[i]);
    }

    $.each(formSerialized, function (i, field) {
        formdata.append(field.name, field.value);
    });

    var communityId = $("#communityId").val();
    var fileLogo = $("#file").val();

    // Only allow if file size is less than 1MB
    if (logofile.size < (1024 * 1024)) {

        $.ajax({

            type: "POST",
            url: host + "/Communities/UploadLogo/" + communityId + "?logo=" + fileLogo,
            contentType: false,
            processData: false,
            data: formdata,
            success: function () {
                console.log('success!!');
            }

        });
        window.location.reload();
    } else {
        var errorMsg = 3;
        $(".modal-dialog").css({
            "left": 0,
            "top": 200,
        });

        $(".modal-body").css({
            "background-color": "green"
        })

        $(".modal-title").text("Error Uploading Logo Image");

        var url = host + "/Communities/ErrorMessageDialog/" + communityId + "?errorMsg=" + errorMsg;

        $("#inviteDialog").load(url, function () {
            $("#inviteModal").modal("show");
        })
    }
    return false;
});

MVC ActionResult

[HttpPost]
[Authorize]
public ActionResult UploadLogo(int id, string logo)
{

    // Uploaded data files go here
    HttpPostedFileBase file = Request.Files[0];
    var logoFile = file.FileName != null ? file.FileName : logo;
    if (logoFile != null || logoFile != "")
    {
        var fileName = Path.GetFileName(logoFile);
        var host = ConfigurationManager.AppSettings["hostroot"];
        if (System.Web.HttpContext.Current.Request.IsLocal)
            host = "";

        var communityId = id;
        //    var fileName = file.FileName;
        var directory = Server.MapPath("~/CommunityStorage/" + communityId + "/Logo/");
        var virtualPath = host + "/CommunityStorage/" + communityId + "/Logo/";

        // Create a new directory for the community if it does not exist based on their community id
        if (!Directory.Exists(directory))
        {
            Directory.CreateDirectory(directory);
        }

        var path = Path.Combine(directory, fileName);
        file.SaveAs(path);

        // Save file path to the Communities Table
        var community = db.Communities.Where(x => x.CommunityId == communityId).SingleOrDefault();
        if (community == null)
            return RedirectToAction("Index", "login");

        // Update the Logo in the communities table
        community.LogoPath = virtualPath + fileName;
        db.SaveChanges();

    }

    return View();

}

Answer 1

From the comments:

the typical pattern for ajax follows as:

$.ajax({ ... success: function(data) { /* Do stuff here */ } });

If you are looking to reload the page after you receive your data do so in the callback like so:

$.ajax({
     ... 
    success: function(data) { 
        window.location.reload(); 
     } 
 });

Be careful when reloading the page: JavaScript data doesn't persist after page reload unless you're using cookies / caching.