javascript - JQuery ajax 文件上传到 ASP.NET 并包含所有表单数据

Question

我正在构建一个网站，该网站有一个职业页面，其中包含用于简历上传的输入文件 HTML 控件。 使用 JQuery 将表单值 POST 到 ASPX 页面时，除了文件上传之外，一切正常。 如何使用 JQuery 发布一个 AJAX 请求中的每个字段(包括文件)？ 我在 Google 中看到的示例仅处理文件上传，而不处理其他字段。 这是我的JQuery、ASPX用于文件上传没有做成的。

  <script type="text/javascript">

   $(document).ready(function(e) {

       // File variable
       var files;

       // Add events
       $('#resume').on('change', prepareUpload);

       // Grab the files and set them to our variable
       function prepareUpload(event)
       {
         files = event.target.files;
       }



   $( "#submit_btn" ).click(function( ) {

       var fileData = new FormData();
       $.each(files, function(key, value)
       {
           fileData.append(key, value);
       });



       var formMessage = tinyMCE.get('message').getContent();
       var formName = $('.contact-container #name').val();
       var formPhone = $('.contact-container #phone').val();
       var formEmail = $('.contact-container #email').val();
       var formApplyFor = $('.contact-container #applyfor').val();

    // Get some values from elements on the page:
   var a=  $.ajax({
           method: "POST",
           url: "mail/test.aspx",
           processData: false,
           contentType: false,
           data: {
                   form: 'career',
                   name: formName ,
                   phone: formPhone,
                   email: formEmail,
                   applyfor: formApplyFor,
                   resume: fileData,
                   coverletter: window.btoa(unescape(encodeURIComponent( formMessage)))
                   },

                   success: function (data) {
                   alert('success');

               },
               error: function (data) {
                   alert('err');

               }
       })
       .done(function( msg ) {
           alert('done');
       }); //ajax end
   alert(a);

   }); //submit button end

   }); //document ready end
 </script>

Answer 1

这可能是因为您不应该单独对待它，而应将其视为一个表单对象(formData)

在这里您可以找到一个包含“原始”字段以及文件字段的表单示例

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

我做了一个快速测试来演示它使用 ASP.NET MVC 的工作原理:

HTML 和 JavaScript:

<form id="form" name="form1" method="post" enctype="multipart/form-data">
    <div>
        <label for="caption">Image Caption</label>
        <input name="caption" type="text" />
    </div>
    <div>
        <label for="caption2">Image Caption2</label>
        <input name="caption2" type="text" />
    </div>
    <div>
        <label for="image1">Image File</label>
        <input name="image1" type="file" />
    </div>
</form>

<button onclick="submit()">test</button>

function submit() {
    var form = document.querySelector('form');

    var data = new FormData(form);

    $.ajax({
        type: "POST",
        url: "Home/Upload",
        data: data,
        processData: false,
        contentType: false
    });
}

ASP.NET MVC:

    public ActionResult Upload()
    {
        foreach (string file in Request.Files)
        {
            var fileContent = Request.Files[file];
            if (fileContent != null && fileContent.ContentLength > 0)
            {
                var stream = fileContent.InputStream;
                var fileName = fileContent.FileName;
                //you can do anything you want here
            }
        }

        foreach (string key in Request.Form)
        {
            var value = Request.Form[key];
        }

        return Content("OK");
    }

当然，通过绑定(bind)到模型等可以做得更好......

如果您的原始字段不在表单内，我将使用追加将它们添加到 formData 对象，然后尝试单独发送该对象。希望这有帮助