Question

我正在创建一个配置文件页面，其中有一个徽标使用图片标记。我需要通过单击图像更改徽标并选择新徽标。

当前实施：

我使用了文件上传控件并隐藏了元素。
当用户点击徽标时，我调用了文件上传的点击事件。
在文件上传控制的onChange事件中，我提交了关闭表单
我跟踪表单提交事件并使用xhr请求发送带有图像的Ajax帖子

Html代码：

<div align="center">
  @using (Ajax.BeginForm("UpdateImage", "Account", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "successImage" }, new { enctype = "multipart/form-data" }))
   {
    <img alt="User Pic" src="@Model.user.ImagePath" id="profile-image1" class="img-circle img-responsive">
    <input id="profile-image-upload" name="image" class="hidden" type="file" onchange="$(this).closest('form').submit();">
    <div id="imageError" class="field-validation-error" style="height:100%; display:none;">click here to change image</div>                               
   }
 </div>

JQuery代码：

$(function () {
 $("form").submit(function (e) {
 e.preventDefault();
 var form = e.target;
 if (form.getAttribute("enctype") === "multipart/form-data") {
    var file = $(form).find('#profile-image-upload');
    if (!validateImage(file)) {
        return false;
    }
    if (form.dataset.ajax) {
      e.stopImmediatePropagation();
      var xhr = new XMLHttpRequest();
      xhr.open(form.method, form.action);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.response);
        successIamge(result);
        return false;
      }
    };
    xhr.send(new FormData(form));
    }
  }
 });

$('#profile-image1').on('click', function () {
  $('#profile-image-upload').click();
});

function successImage(result) {
  if (!result || !result.resultCode) return; //If result is null not handled or Validation handled via ModelState
  if (result.resultCode == 1) {
    // $('profile-image1').attr('src', result.resultValue);
     location.reload();
        }
  else {
     location.href = "/Error/Index?errorMessage=" + result.resultMessage;
        }
 }

当前问题：

流程成功完成但在响应图像后，再次触发了帖子请求。

我的工作：

来自guest271314的问题我发现我禁止默认表单提交。所以现在添加了提交的防止默认值。我改变了上面的代码源。现在图像没有使用新图像更新我收到了上传的响应。所以现在我改变了sucessLogo方法来重新加载页面得到了新的图像。

现在请建议任何其他方法来更新图像而不重新加载页面

xhr多次请求呼叫

0 个答案: