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

Answer 2

如果我正确理解你的问题，你想根据#addFileForm的课程改变一些行为。为此，您可以通过执行以下操作来检查课程：

switch($('#addFileForm').attr('class')){
case 'dentalFileForm':
 //do stuff
 break;
//etc. 
}

Answer 3

而不是使用像dentalFileForm这样的类，你可以使它们像file-dental那样，然后改变你的JS选择器：

var formData = new FormData($('form[class^="file-"]')[0]);

在jQuery中将表单类更改为文件上载

3 个答案: