我的想法是通过jQueryForm提交放置在Bootstrap模式中的myForm，并立即向用户上传状态响应。它工作正常，直到我尝试通过克隆myModal重置myForm。克隆后一切看起来很好，直到你再次尝试提交myForm。结果是，我没有填写myStatus，而是重定向到upload_replay-echo.php。解决方案很简单：location.reload（）但它使整个想法完全毫无意义。
以下代码是一个工作示例。 upload_replay-echo.php可以返回任何内容。例如：
<?php
echo 'Upload echo..<br>';
?>
有人可以帮我解决这个问题吗？
提前致谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.3/bootstrap-table.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.3/bootstrap-table.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
var myBackup = $('#myModal').clone();
// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
$('#myModal').modal('hide').remove();
var myClone = myBackup.clone();
$('body').append(myClone);
// location.reload();
});
});
</script>
</head>
<body>
<!-- Modal starter.. -->
<div class="container">
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
Start modal
</button>
</div>
<!-- Modal.. -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">File to upload</h4>
</div>
<!-- Modal Body -->
<div class="modal-body" id="myModalBody">
<form id="myForm" enctype="multipart/form-data" action="upload_replay-echo.php" method="post" >
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<input type="submit" class="btn btn-primary btn-sm" value="Upload file" />
<input type="file" name="myfile[]" multiple title="Choose WoT replay files to upload" size="100" class="btn-sm"/>
</form>
<div class="row"> </div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<div>
Important: <small>If you can see any text below then please use "Reset" button before trying to upload any file.</small>
</div>
<div id="myStatus"></div>
</div>
<!-- Modal Body - end -->
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal" id="myReset">Reset</button>
</div>
</div>
</div>
</div>
<!-- File upload tests: jQuery.Form -->
<script src="js/jquery.form.js"></script>
<script>
(function() {
var bar = $('.progress-bar');
var status = $('#myStatus');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var pcv = '0%';
bar.width(pcv);
},
uploadProgress: function(event, position, total, percentComplete) {
var pcv = percentComplete + '%';
bar.width(pcv);
},
success: function() {
var pcv = '100%';
bar.width(pcv);
},
complete: function(xhr) {
var pcv = '0%';
// Wait 1 second and reset progress..
setTimeout(function (){
bar.width(pcv);
}, 1000);
status.html(xhr.responseText);
}
});
})();
</script>
<!-- File upload tests: jQuery.Form - end -->
</body>
</html>
答案 0 :(得分：0)
我意识到ajaxForm只是一次初始化！当你重置模态相关的Form - dom元素unbind从jquery表单插件。 每次重置模态时都应该准备.Form（Instantiation）。
var myUploadModule = myUploadModule || {};
$(window).load(function() {
myUploadModule.myBackup = $('#myModal').clone();
myUploadModule.init = function() {
var _this = this;
console.log("my module initializer");
// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
$('#myModal').modal('hide').remove();
var myClone = _this.myBackup.clone();
$('body').append(myClone);
myUploadModule.prepareForm();
// location.reload();
});
myUploadModule.prepareForm();
};
myUploadModule.prepareForm = function() {
var bar = $('.progress-bar');
var status = $('#myStatus');
$('form').ajaxForm({
crossDomain: true,
dataType: 'jsonp',
beforeSend: function() {
status.empty();
var pcv = '0%';
bar.width(pcv);
},
uploadProgress: function(event, position, total, percentComplete) {
var pcv = percentComplete + '%';
bar.width(pcv);
},
success: function() {
var pcv = '100%';
bar.width(pcv);
},
complete: function(xhr) {
var pcv = '0%';
// Wait 1 second and reset progress..
setTimeout(function (){
bar.width(pcv);
}, 1000);
status.html(xhr.responseText);
}
});
};
myUploadModule.init();
});