Question

我有一个回发应该刷新我的页面并重新加载页面。当页面重新加载时，它应该显示图像或上传的链接或上传的文档链接等。这在我本地运行时效果很好，但是当我将相同的代码部署到我的主机服务器时，页面会重新加载空白，并且用户必须点击刷新才能看到结果。以下代码段要求用户上传图像，然后执行更新：

标记：

  <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（）{ //主持人

    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

来自评论：

ajax的典型模式如下：

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

如果您希望在收到数据后重新加载页面，请在回调中这样做：

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

重新加载页面时要小心：除非您使用cookie /缓存，否则页面重新加载后JavaScript数据不会保留。

为什么我在Chrome中的回发不会刷新我的页面

1 个答案: