I have a form:
<div class="row-fluid">
<div class="span5 row-fluid" id="description" style="margin-left:0px;">
<div>
<label>Title</label>
<input class="span12" type="text" placeholder="Title" id="description_title" name="description_title"/>
<label>Author</label>
<input class="span12" type="text" placeholder="Author" id="description_author" name="description_author"/>
<label>Tags</label>
<input class="span12" type="text" placeholder="Tags" id="description_tags" name="description_tags"/>
<label>Description</label>
<textarea class="span12" id="description_textarea" name="description_textarea" rows="5" style="resize:none"></textarea>
<div id="buttons" class="row-fluid" style="margin-top: 5px">
<div class="span12">
<span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files
<input id="filechose_button" type="file" name="fileData" data-url="http://localhost:3001/upload/1234567890"/></span>
<button id="upload_button" type="submit" name="upload" class="span5 offset2 btn btn-success" disabled="true" onclick="$('#upload_form').trigger('upload_fired');">upload</button>
</div> <!-- span12 -->
</div> <!-- buttons -->
</div> <!-- well -->
</div> <!-- video_description -->
</div> <!-- row-fluid -->
How can I integrate a JQuery Upload Plugin in such a way, that after choosing a file with filechose_button
I can enable the upload_button
and send all input fields and file(s) using AJAX, not like it works now just reloading the page after a POST request.
the js for upload is:
$(function () {
$('#filechose_button').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('#upload_button');
$('#upload_button').click(function () {
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
but still it sends the data not using AJAX
File upload is not possible through AJAX. You can upload file, without refreshing page by using IFrame .
The problem was the default behavior of the <button>
element of the form. The removing the attribute type="submit"
does not change anything. So instead of triggering my own function, the button
send the form
via normally POST
request.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With