将jQuery ajax文件上传到ASP.NET [英] JQuery ajax file upload to ASP.NET

问题描述

我正在建立一个网站，其中有一个职业网页，其中包含用于恢复上传的输入文件HTML控件。

使用JQuery将表单值POST到ASPX页面时，除了文件上传外，一切正常。

如何使用JQuery在一个AJAX请求中发布每个字段（包括文件）？

我在Google中看到的示例只处理文件上传，而不处理其他字段。

这是我的JQuery，没有制作文件上传的ASPX。

 < script     type   =  text / javascript  >  
 
 $（document）.ready（function（e）{
 
  //  文件变量 
  var 个文件; 
 
  //  添加活动 
 $（' ＃resume'）。on（'  change'，prepareUpload）; 
 
  //  抓取文件并将它们设置为我们的变量 
函数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（）; 
 
  //  从页面上的元素中获取一些值： 
  var  a = $ .ajax（{
 method：  POST，
 url：  mail / test.aspx，
 processData： false ，
 contentType： false ，
 data：{
 form：'  career'，
 name：formName， 
手机：formPhone，
电子邮件：formEmail，
申请：formApplyFor，
 resume：fileData，
 coverletter：window.btoa（unescape（encodeURIC） omponent（formMessage）））
}，
 
成功：函数（数据）{
 alert（' 成功）; 
 
}，
错误：函数（数据）{
 alert（'  ERR'）; 
 
} 
}）
 .done（函数（msg）{
 alert（'  done'）; 
}）;  //   ajax end  
 alert（a）; 
 
}）;  //  提交按钮结束 
 
}）;  //  文档就绪结束 
 < /   script  >  

解决方案

（document）.ready（function（e）{

// 文件变量
var 个文件;

/ / 添加事件

（' ＃resume'）。on（' change' ，prepareUpload）;

// 抓取文件并将它们设置为我们的变量
函数prepareUpload（ event ）
{
files = event .target.files;
}

（ ＃submit_btn） .click（function（）{

var fileData = new FormData（） ;

Hi,
I am building a website, that has a career page with Input File HTML Control for Resume uploading.
While using JQuery to POST the form values to an ASPX Page, Everything works fine except File uploading.
How can I Use JQuery to Post every fields (including files) in one AJAX request ?
The example I see in Google are handling only the file uploading, not other fields with it.
This is my JQuery, ASPX for file upload not made.

<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>

解决方案

(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();

这篇关于将jQuery ajax文件上传到ASP.NET的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！