我有一张表格:
<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 -->
如何以这种方式集成JQuery上载插件,选择带filechose_button
的文件后,我可以启用upload_button
并使用AJAX发送所有输入字段和文件,而不是喜欢它现在只是在POST请求后重新加载页面。
上传的js是:
$(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.');
}
});
});
但仍然不使用AJAX发送数据
答案 0 :(得分:5)
问题是表单的<button>
元素的默认行为。删除属性type="submit"
不会改变任何内容。因此,button
通过正常form
请求发送POST
,而不是触发我自己的功能。
答案 1 :(得分:2)
@Pere:确保您不使用表单中的按钮。我通过使用带有bootstrap btn类的div解决了这个问题。这是我的javascript代码:
//this should not be a <button></button>, but a div
var submitbtn = $("#submitbtn");
//upload an image && form submission
$('#avatar').fileupload({
singleFileUploads: true,
multipart : true,
dataType : 'json',
autoUpload : false,
url : 'yourEndpoint',
type : 'POST',
add : function (e, data) {
submitbtn.on("click", function () {
data.formData = $("#form-activate-user").serializeArray();
data.submit();
});
},
done : function (result) {}
},
fail : function (e) {}