<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mahavir Prints</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
// javascript to upload images and showing loading image[$('#lm').show();] before upload
<script type="text/javascript">
$.ajaxSetup({
cache: false
});
$(document).ready(function () {
$("form#designDetailForm").submit(function (event) {
event.preventDefault();
//grab all form data
var formData = new FormData($(this)[0]);
var x = true;
if (designNo.value == "") {
alert("Please enter design no");
designNo.focus();
x = false;
return x;
}
if (designNo.value != "") {
var reg = /^\d+$/;
if (reg.test(designNo.value) == false) {
alert("Please enter a valid design number.Design number should contain only numeric values.");
designNo.focus();
x = false;
return x;
}
}
if (designImage.value == "") {
alert("Please select a image for design to be uploaded.");
designImage.focus();
x = false;
return x;
}
if (x) {
$('#send').attr("disabled", true);
$('#lm').show();
$.ajax({
url: 'designDetails',
data: formData,
type: 'post',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
var result = data;
if (result == 'Design number already exists for this category.' || result == 'File name already exists.Please change the name of file and then upload.') {
$('#failure').show();
$('#success').hide();
$('#failure').text(result);
} else {
$('#failure').hide();
$('#success').show();
$('#success').text(result);
$('#designNo').val('')
$('#designImage').val('');
}
$('#lm').hide();
$('#send').attr("disabled", false);
}
});
}
});
$('#send').attr("disabled", false);
$('#lm').hide();
});
</script>
</head>
<body>
<div class="container">
<h2>Add new design</h2>
<form role="form" name="designDetailForm" id="designDetailForm"
method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="designNo">Design No</label> <input type="text"
class="form-control" id="designNo" name="designNo"
placeholder="Design No">
</div>
<div class="form-group">
<label for="category">Category</label> <select name="category"
id="dCategory" class="form-control">
<option value="1" selected="selected">Amercian Chiffon</option>
<option value="2">Nagma</option>
<option value="3">Soft Feel</option>
<option value="4">Sharmili</option>
</select>
</div>
<div class="form-group">
<label for="designPhoto">Design Photo</label> <input
class="form-control" type="file" id="designImage"
name="designImage" size="50" />
</div>
<button id="send" type="submit" class="btn btn-default" >Submit</button>
</form>
<div id=lm style='display: none; height: 100px; position: relative;'>
<img src='img/loading.png' style='position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin-top:-150px;' />
</div>
<div id="success" style="color: green;"></div>
<div id="failure" style="color: red;" tabindex='1'></div>
</div>
</body>
</html>
我做错了什么？。我能够成功上传图片。我无法在上传之前显示加载图片[$（＆＃39; #lm＆＃39;）。show（）;]。如果在alert("test")之后放置$('#lm').show();，我可以看到加载图片。
但是如果我删除alert("test")，它就不会显示我正在加载图片。
答案 0 :(得分：0)
这可能有助于在条件允许时进行更改。
$(document).ready(function () {
$('#send').attr("disabled", false);
$('#lm').hide();
$("form#designDetailForm").submit(function (event) {
event.preventDefault();
//grab all form data
var formData = new FormData($(this)[0]);
var x = true;
if (designNo.value == "") {
alert("Please enter design no");
designNo.focus();
x = false;
return x;
}
if (designNo.value != "") {
var reg = /^\d+$/;
if (reg.test(designNo.value) == false) {
alert("Please enter a valid design number.Design number should contain only numeric values.");
designNo.focus();
x = false;
return x;
}
}
if (designImage.value == "") {
alert("Please select a image for design to be uploaded.");
designImage.focus();
x = false;
return x;
}
if (x) {
$('#send').attr("disabled", true);
$('#lm').show();
$.ajax({
url: 'designDetails',
data: formData,
type: 'post',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
var result = data;
if (result == 'Design number already exists for this category.' || result == 'File name already exists.Please change the name of file and then upload.') {
$('#failure').show();
$('#success').hide();
$('#failure').text(result);
} else {
$('#failure').hide();
$('#success').show();
$('#success').text(result);
$('#designNo').val('')
$('#designImage').val('');
}
$('#lm').hide();
$('#send').attr("disabled", false);
}
});
}
});
});
答案 1 :(得分：0)
使用beforeSend。
if (x) {
$.ajax({
url: 'designDetails',
data: formData,
type: 'post',
async: false,
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#send').attr("disabled", true);
$('#lm').show();
}
success: function(data) {
var result = data;
if (result == 'Design number already exists for this category.' || result == 'File name already exists.Please change the name of file and then upload.') {
$('#failure').show();
$('#success').hide();
$('#failure').text(result);
} else {
$('#failure').hide();
$('#success').show();
$('#success').text(result);
$('#designNo').val('')
$('#designImage').val('');
}
$('#lm').hide();
$('#send').attr("disabled", false);
}
});
}
答案 2 :(得分：0)
我自己找到了解决方案。
在ajax调用中删除async：false为我完成了这项工作。 谢谢大家的帮助。