Jquery-form-plugin實現到當前的請求調用

Question

我有一個表單與多個文件上傳以及其他字段，通常我會請求jquery ajax處理數據如下，我可以提醒所有輸入參數並通過到服務器端執行某些任務。

既然我已經在這種形式上傳的領域，我承認，是不可能通過$('#my_form').serialize()來傳遞文件的數據，我有一些搜索這裏瞭解jquery form plugin可與此問題的幫助，但我並不真正瞭解如何它的工作原理，我希望有人可以在這裏啓發我與工作示例如何實現上述ajax方法，以及如何警告所有輸入值在後發送到服務器端處理，感謝您的幫助！

這裏是當前AJAX請求是不能看到「輸入類型‘文件’」參數：

$('#btn_submit').click(function(){ 
    var parameters = $('#my_form').serialize(); 
    var btn = $(this); 
    btn.button('loading') 
    alert(parameters); 

    $.ajax({ 
     url: 'inc/callback/process.php', 
     type: 'POST', 
     data: parameters, 
     dataType: 'json', 
     success: function(response){ 

      if(response.success == 'success'){ 

       $('#successful').show().html('<b>saved!</b>'); 

      }else{ 
       $('[id$="_error"]').html(''); 

       $.each(response.error, function(key, value){ 
        if(value){ 
         $('#' + key + '_error').html(value); 
        } 
       }); 

      } 
     }, 
     error: function(){ 
      console.log(arguments); 
     } 
    }).always(function(){ 
     btn.button('reset') 
    }); 

}); 


<form class="form-horizontal" role="form" method="post" id="my_form" enctype="multipart/form-data"> 

    <input type="hidden" name="user_id" value="<?php echo $data->userid ?>"> 
    <input type="hidden" name="list_id" value="<?php echo $listid ?>"> 

    <div class="form-group"> 
     <label for="photo">Photo</label> 
     <input type="file" name="files[]" class="multi" accept="gif|jpg" maxlength="3" /> 
    </div> 

    <div class="form-group"> 
     <label for="publish"></label> 
     <input type="checkbox" name="publish" <?php echo $checked ?>> Publish</div> 
    </div> 

    <div class="form-group"> 
     <label for="email">Name</label> 
     <input type="text" id="name" name="name" value="<?php echo $list->name ?>"><span class="error" id="name_error"></span> 
    </div> 

    <hr /> 

    <button class="btn btn-success" id="btn_submit" type="button" data-loading-text="Loading...">Save</button> 
</form> 

EDITED：

我已經試圖通過@Markus弗勒利希提供的代碼，但表單會直接提交到inc/callback/process.php，好像ajaxForm不會觸發以及從未顯示的警報！

//this jq is refer as external js file at the bottom before </body> 
$("#my_form").ajaxForm({ 
     dataType: "json", 
     beforeSend: function() { 
      var btn = $(this); 
      btn.button('loading') 
      alert(parameters); 
    }, 
    uploadProgress: function(event, position, total, percentComplete) { 
     console.log(percentComplete); // Show the completed percent 
    }, 
    success: function(response) { 

     if(response.success == 'success'){ 

      $('#successful').show().html('<b>Edited saved!</b>'); 

     }else{ 
      $('[id$="_error"]').html(''); 

      // display invalid error msg 
      $.each(response.error, function(key, value){ 
       if(value){ 
        $('#' + key + '_error').html(value); 
       } 
      }); 

     } 

    }, 
    error: function(xhr, textStatus, errorThrown) { 
     console.log(errorThrown); 
    } 

}).always(function(){ 
     btn.button('reset') 
}); 


<form class="form-horizontal" role="form" method="post" id="my_form" enctype="multipart/form-data" action="inc/callback/process.php"> 

    <input type="hidden" name="user_id" value="<?php echo $data->userid ?>"> 
    <input type="hidden" name="list_id" value="<?php echo $listid ?>"> 

    <div class="form-group"> 
     <label for="photo">Photo</label> 
     <input type="file" name="files[]" class="multi" accept="gif|jpg" maxlength="3" /> 
    </div> 

    <div class="form-group"> 
     <label for="publish"></label> 
     <input type="checkbox" name="publish" <?php echo $checked ?>> Publish</div> 
    </div> 

    <div class="form-group"> 
     <label for="email">Name</label> 
     <input type="text" id="name" name="name" value="<?php echo $list->name ?>"><span class="error" id="name_error"></span> 
    </div> 

    <hr /> 

    <button class="btn btn-success" id="btn_submit" type="submit" data-loading-text="Loading...">Save</button> 
</form> 

Answer 1

此代碼應與ajaxForm一起使用！ （未測試！）

不要忘記新形式的行動，現在的按鈕類型是「提交」。

$("#my_form").ajaxForm({ 
    dataType: "json", 
    beforeSend: function() { 
     var btn = $(this); 
     btn.button('loading') 
     alert(parameters); 
    }, 
    uploadProgress: function(event, position, total, percentComplete) { 
     console.log(percentComplete); // Show the completed percent 
    }, 
    success: function(response) { 
     if(response.success == 'success'){ 

      $('#successful').show().html('<b>saved!</b>'); 

     }else{ 
      $('[id$="_error"]').html(''); 

     $.each(response.error, function(key, value){ 
      if(value){ 
       $('#' + key + '_error').html(value); 
      } 
     }); 

    }, 
    error: function(xhr, textStatus, errorThrown) { 
     console.log(errorThrown); 
    } 
}); 


<form action="inc/callback/process.php" class="form-horizontal" role="form" method="post" id="my_form" enctype="multipart/form-data"> 

     <input type="hidden" name="user_id" value="<?php echo $data->userid ?>"> 
     <input type="hidden" name="list_id" value="<?php echo $listid ?>"> 

     <div class="form-group"> 
      <label for="photo">Photo</label> 
      <input type="file" name="files[]" class="multi" accept="gif|jpg" maxlength="3" /> 
     </div> 

     <div class="form-group"> 
      <label for="publish"></label> 
      <input type="checkbox" name="publish" <?php echo $checked ?>> Publish</div> 
     </div> 

     <div class="form-group"> 
      <label for="email">Name</label> 
      <input type="text" id="name" name="name" value="<?php echo $list->name ?>"><span class="error" id="name_error"></span> 
     </div> 

     <hr /> 

     <button class="btn btn-success" id="btn_submit" type="submit" data-loading-text="Loading...">Save</button> 
    </form>