【问题标题】:In Ajax Image Upload, ev.preventDefault(); not working在 Ajax 图片上传中,ev.preventDefault();不工作
【发布时间】:2017-02-06 03:59:37
【问题描述】:

它会上传图片,但会重定向到 UploadImage.cshtml。所以显然 ev.preventDefault 不起作用。有没有办法解决这个问题而无需我通过 blueimp 或 xhtml 的东西,因为我还没准备好接触这些东西。

 HTML
<form method="post" action="UploadImage.cshtml" id="imgUploadForm" class="imgUpload" enctype="multipart/form-data">
                    @FileUpload.GetHtml(
                        initialNumberOfFiles:1,
                        allowMoreFilesToBeAdded:false,
                        includeFormTag: false,
                        uploadText:"Upload")               
                    <input type="submit" name="buttonUpload2" value="Upload" />
                </form>

jQuery

$(function () {
          $('.imgUpload').submit(function (ev) {

              var frm = $(this);
              Upload(frm);
               ev.preventDefault();
          });
      });

      function Upload(frm) {
          $.ajax({
              type: frm.attr('method'),
              url: frm.attr('action'),
              data: new FormData(frm),
              success: function (data) {
                  alert('Success');
              },
              error: function () {
                  alert('Error');
              }
          });
      }

【问题讨论】:

  • 我猜是 ev.preventDefault();必须是方法体的第一条语句。
  • 我试过了。然后表单根本不提交。

标签: html ajax razor


【解决方案1】:

使用以下 Jquery 代码解决。谢谢

$(document).ready(function (e) {
          $('.imgUpload').on('submit', (function (e) {
              e.preventDefault();
              var formData = new FormData(this);

              $.ajax({
                  type: 'POST',
                  url: $(this).attr('action'),
                  data: formData,
                  cache: false,
                  contentType: false,
                  processData: false,
                  success: function (data) {
                      alert('success');
                  },
                  error: function (data) {
                      alert('error');
                  }
              });
          }));
      })

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-08-27
    • 2015-02-21
    • 2016-07-14
    • 2017-01-01
    • 1970-01-01
    • 2013-10-27
    • 2012-01-01
    • 1970-01-01
    相关资源
    最近更新 更多