javascript - 在 jQuery 中将表单类更改为文件上传

Question

我正在编写文件上传脚本。有几个目录需要上传文件，但是，我正在尝试使用一个表单来执行此操作。

话虽如此，我可以使用 jQuery 更改表单类以尝试使用单个表单。

这是表格:

 <form method="post" class="addFileClass" id="addFileForm" enctype="multipart/form-data">
   <input type="file" class="fileToUpload" name="fileToUpload" id="fileToUpload" />
   <button type="button" id="newfilesubmit">Upload</button>
 </form>

这些链接是我用来开始表单类更改的链接:

 <a href="#" class="addDentalFile">Add Dental File</a>
 <a href="#" class="addLifeADDFile">Add Life ADD File</a>
 .....several more.....

使用这些 href，我可以使用 jQuery 来更改表单类:

 $('.addDentalFile').on('click', function(e)
 {
   e.preventDefault();
   $('#addFileForm').trigger('reset');
   $('#addFileForm').removeClass();
   $('#addFileForm').addClass('dentalFileForm');
   $('.addFileModal').modal('show');
 });
 ......same format for the other links......

使用上面的方法，我可以成功地更改表单 ID #addFileForm 的类。

这就是我卡住的地方。这是我当前的上传脚本:

 $('#newfilesubmit').on('click', function()
 {
   var formData = new FormData($('#addFileForm')[0]); // <-class should be passed here, but how when the class will be different?
   $.ajax({
     url: 'api/uploadFile.php',
     data: formData,
     async: false,
     contentType: false,
     processData: false,
     cache: false,
     type: 'POST',
     success: function(data)
     {
       // doing success stuff
     },
     fail: function()
     {
       // doing fail stuff
     }
   });
 });

上述脚本在 ID 保持不变时有效。但由于现在我正在使用表单的类，jQuery 需要能够识别新类(我希望我说的是对的)。

综上所述，我如何在传递新类时更改变量 formData？这可能吗？

Answer 1

你可以这样做。点击提交按钮后，根据表单上当前应用的类获取 URL。

$('#newfilesubmit').on('click', function()
     {
       var formData = new FormData($('#addFileForm')[0]); // <-
       var currentclass = $('form').attr('class');
       var currentUrl;
       if(currenClass == 'dentalClass'){
         currentUrl = 'api/upload.php';
       }else if(currenClass == 'dentalClass'){
         currentUrl = 'api/someotherfile.php';
       }
    //class should be passed here, but how when the class will be different?
       $.ajax({
         url: currentUrl,
         data: formData,
         async: false,
         contentType: false,
         processData: false,
         cache: false,
         type: 'POST',
         success: function(data)
         {
           // doing success stuff
         },
         fail: function()
         {
           // doing fail stuff
         }
       });
     });