Jquery-form-plugin implementation to current request call - php

Question

I have a form with multiple file upload as well as others field along, normally I will request jquery ajax to process the data as below, and I can alert all input parameters and pass to server-side to perform certain task.
Since I have upload field in this form, I has acknowledged that is impossible to passes files data through $('#my_form').serialize(), I have some search here and know jquery form plugin can help with this issue, but I don't really get to know how it works, I hope somebody can enlighten me here with working example on how can I implement to above ajax method, and also how can I alert all input values is in post before send to sever-side to process, thanks for help!!!
Here is the current ajax request which is cannot see 'input type "file"' parameter:
$('#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:
I've been tried the code provided by #Markus Fröhlich, but the form will submitted directly to inc/callback/process.php, seems like the ajaxForm doesn't trigger as well as alert never shown!
//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

This code should works with ajaxForm! (Not tested!!!)
Don't forget the new form action, and the Button Type is now "submit".
$("#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>