在jQuery中将表单类更改为文件上传答案

【问题标题】：Change form class to file upload in jQuery在jQuery中将表单类更改为文件上传
【发布时间】：2017-03-02 18:47:08
【问题描述】：

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

话虽如此，我可以使用 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？这可能吗？

【问题讨论】：

如果表单本身没有改变，那是什么？似乎您想根据类名而不是表单本身来更改 ajax url。如果此推论不正确，请更新问题并使其更清楚。
您使用相同的表单提交两种类型的链接，并且您还有一个 ajax 提交操作。您想通过更改表格类别获得什么好处？你能解释一下吗？
@gschambial - 老实说，我只是想找到在提交不同文件时使用单个表单的最佳方法。如果更改表单类是一个坏主意，那么也许我不应该走那条路。
@JohnBeasley 这不是一个坏主意。但是，您应该做的是检查当前应用于表单元素的类，然后使用变量来存储请求的 url，具体取决于类。然后，最后在ajax 请求的url 属性中使用该变量。我希望，它会有所帮助。
@JohnBeasley 您可以使用var currentUrl = $('form').attr('class') 获取当前应用于form 的类，然后在ajax 请求中使用url : currentUrl。

标签： javascript jquery ajax class

【解决方案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
         }
       });
     });

【讨论】：

我不得不修改你提供的 IF 语句......应该是双等于 ==，而不是单等于 =。这让我疯狂了一个小时。但最后，这正是对我有用的。现在我可以通过类并获取适当的 URL 脚本来上传必要的文件。非常感谢，gschambial。我接受了你的回答。

【解决方案2】：

如果我正确理解您的问题，您想根据#addFileForm 的课程更改一些行为。为此，您可以通过以下方式检查课程：

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

【讨论】：

我想这就是我要找的。我会尝试让你知道。

【解决方案3】：

除了使用dentalFileForm 之类的类，您可以将它们设为file-dental 之类的东西，然后像这样更改您的JS 选择器：

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

【讨论】：