Tôi tình cờ gặp vấn đề tương tự khi tôi muốn tải lên hình ảnh qua yêu cầu AJAX ngay khi hình ảnh được duyệt/chọn bởi người dùng và cập nhật trường ẩn với ID hình ảnh đã lưu. Tôi không thể tìm thấy giải pháp với tệp bootstrap-fileupload.js. Vì vậy, cách tiếp cận dưới đây làm việc cho tôi. Mẫu
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
var options = {
success: showResponse // post-submit callback
};
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#imageform").ajaxForm(options).submit();
});
});
function showResponse(responseText, statusText, xhr, $form) {
$('#photoUrl').val(responseText);
}
</script>
Hình ảnh: (không phải là một hình thức lồng nhau!)
<form id="imageform" action="${pageContext.request.contextPath}/app/upload/saveimage" method="post" enctype="multipart/form-data">
<div style="top: 25px">
<div class="span6" style="margin-top: -545px; margin-left:680px">
<div class="control-group">
<label class="control-label " style="text-align: left">Photo: </label>
<div data-fileupload="image" class="fileupload fileupload-new">
<div style="margin-left:-235px ;width: 150px; height: 150px; line-height: 150px;" class="fileupload-preview thumbnail" ></div>
<div>
<span class="btn btn-file" style="margin-right: 135px"><span class="fileupload-new" >Select image</span><span class="fileupload-exists">Change</span><input type="file" name="fileData" id="photoimg"/></span> <a data-dismiss="fileupload" class="btn fileupload-exists" href="#" style="margin-left: -75px">Remove</a>
</div>
</div>
</div>
</div>
</div>
</form>
<input type="hidden" name="individualCustomer.personInfo.photoUrl" id="photoUrl" />
Nguồn
2012-09-18 06:58:56
Thx cho đề xuất. Tôi thích tính năng xem trước của tệp tin boostrap-fileupload.js và đó là lý do tại sao tôi đã cố gắng tìm cách kích hoạt tệp evenf từ js này. Đánh giá cao phản hồi, nhưng tôi đã biết về tải lên tệp jquery. –
Tôi không thấy điều này là có thể. Nếu bạn nhìn vào nguồn của jasny nó sử dụng cùng tên cho hàm jquery được sử dụng bởi jquery.fileupload (cả hai đều được gọi là $ .fileupload). Do đó sẽ rất khó để sử dụng hai người trong số họ cùng nhau. –