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
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.