Basically I am using html form for uploading image on server. Below is my code for form:
<div class="modal modal-fixed-footer" id="modal-image">
<div class="modal-content">
<h3>Upload Image</h3>
<form id="uploadimg" enctype="multipart/form-data">
<input type="hidden" name="entity" value="order">
<input type="hidden" name="orderId" value="<?php echo $orderId; ?>">
<input type="hidden" name="status" value="<?php echo $json->response->body->order->status; ?>" />
<input type="hidden" name="url" value="order-details.php?order=<?php echo $orderId; ?>&e=0">
<div class="form-inputs p-l-r-0">
<div class="row">
<div class="col s12">
<div class="file-field input-field" style="display:none">
<div class="btn accent-color">
<span>File</span>
<input type="file" id="fileToUpload" name="fileToUpload[]" multiple="multiple">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more images">
</div>
</div>
</div>
</div>
<div id="dvPreview" class="row"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn-flat modal-action modal-close" id="uploadimg-submit">Submit</button>
<button class="btn-flat modal-action modal-close">Close</button>
</div>
Now when the #uploadimg-submit is clicked below jquery code is executed:
$('#uploadimg-submit').on('click', function(e) {
e.preventDefault();
$("form#uploadimg").submit();
});
and form submit function:
$("form#uploadimg").submit(function(e2) {
var smoothState = $('#main').smoothState().data('smoothState');
e2.preventDefault();
var formData = new FormData($(this)[0]);
// console.log(formData);
$.ajax({
url: 'processors/process-upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
ajaxindicatorstart();
},
success: function(rsp) {
if (rsp == '200') {
Materialize.toast('Image Uploaded Successfully', 2000, 'green');
smoothState.clear('/order-details.php');
smoothState.load('/order-details.php?order=' + $('#order_id').val());
} else {
Materialize.toast('Image Uploaded Failed', 2000, 'red');
smoothState.clear('/order-details.php');
smoothState.load('/order-details.php?order=' + $('#order_id').val());
}
},
error: function() {
Materialize.toast('Image Uploaded Failed', 2000, 'red');
smoothState.clear('/order-details.php');
smoothState.load('/order-details.php?order=' + $('#order_id').val());
}
});
return false;
});
The file process-upload.php takes less than a second to process the image which i debugged using microtime(true). But total time take by sending request and recieving response is nearly 11 secs, majority of which (about 9 secs) is taken in sending request. Below are timeline analytics from chrome dev tools.
I want to reduce this time else it will be unfeasible to wait so long for uploading image. Is there any way I can optimize it further?
