wolfgang1983 wolfgang1983 - 28 days ago 9
jQuery Question

Combine upload files and send other field values in ajax request

I am trying to be able to get the val of #posthash input as well as uploading the file.

I would like to be able to use

formData.append('newattachment', $('input[type=file]')[0].files[0]);


And
$('#posthash').val()


How ever if use
$('#posthash').val()
as well it makes form throw upload error if use both.
You did not select a file to upload.



Question how can I get my post hash val and also upload
and post at same time?


<script type="text/javascript">
$('#newattachment').on('click', function(e){
var formData = new FormData();
formData.append('newattachment', $('input[type=file]')[0].files[0]);
$.ajax({
type: 'post',
url: "<?php echo base_url('newthread/attachments');?>",
data: {
formData,
posthash: $('#posthash').val()
},
cache: false,
contentType: false,
processData: false,
success: function(response){
if (response.processed) {

} else {

$('#errors').append('<div class="upload_errors"></div>');
$(".upload_errors").html(response.upload_errors);

}
}
});

e.preventDefault();
});
</script>


HTML

<?php echo form_open_multipart($action, array('id' => 'form-post'));?>

<div class="container">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" id="errors">
</div>
</div>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" id="upload_data">
</div>
</div>

<div class="row">

<div class="col-lg-3 col-md-3 col-sm-12">
<div class="well">

</div>
</div>

<div class="col-lg-9 col-md-9 col-sm-12">

<input type="hidden" name="posthash" id="posthash" value="<?php echo $posthash;?>">

<div class="panel panel-default">

<div class="panel-heading">

</div>

<div class="panel-body">

<div id="message" contenteditable="true" style="width: 100%; height: 344px; overflow: auto;"></div>

</div>

<div class="panel-footer">
<div class="row">
<div class="col-lg-6">
<div class="clearfix" style="padding-top: 6px;">
<div class="pull-left">
<label>New Attachment:</label>
</div>
<div class="pull-right">
<input name="attachment" id="attachment" size="30" class="fileupload" type="file">
</div>
</div>
</div>
<div class="col-lg-6 text-right">
<input class="btn btn-default" name="newattachment" id="newattachment" value="Add Attachment" type="button" />
</div>
</div>
</div>

</div>

<br/>

<?php if ($attachments) {?>
<?php foreach ($attachments as $attachment) {?>
<ul>
<li>
<img src="<?php echo base_url('uploads/' . $attachment['attachname']);?>" width="150" height="150">
</li>
</ul>
<?php }?>
<?php }?>

</div>

</div>

</div>

<?php echo form_close();?>

<script type="text/javascript">
$('#newattachment').on('click', function(e){
var formData = new FormData();
formData.append('newattachment', $('input[type=file]')[0].files[0]);
$.ajax({
type: 'post',
url: "<?php echo base_url('newthread/attachments');?>",
data: {
formData,
posthash: $('#posthash').val()
},
cache: false,
contentType: false,
processData: false,
success: function(response){
if (response.processed) {

} else {

$('#errors').append('<div class="upload_errors"></div>');
$(".upload_errors").html(response.upload_errors);

}
}
});

e.preventDefault();
});
</script>

Answer

If you use the FormData() as the data you send to the server (in your ajax request) you must use only this object to send data:

var formData = new FormData();
formData.append('newattachment', $('input[type=file]')[0].files[0]);
formData.append('posthash', $('#posthash').val());

And inside your $.ajax call:

$.ajax({
    type: 'post',
    url: "",
    data: formData,
    ...
});
Comments