我已经创建了一个表单来上传两个文件- questionpaper和密钥。但是Ajax请求没有按照预期的方式工作。我一直在尝试和尝试，但无法找出错误。请帮助。这是我的表格。
<form name="facform" id="facform" data-abide="ajax" enctype="multipart/form-data">
<fieldset>
<legend> All fields are required </legend>
<div class="row">
<div class="large-3 medium-3 columns">
<label> <b> Upload Question Paper </b> </label>
<input type="file" id="qfile" name="qfile" tabindex="7" required>
</div>
<div class="large-3 medium-3 columns end">
<label><b> Upload Key </b></label>
<input type="file" id="kfile" name="kfile" tabindex="8" required>
</div>
</div>
</fieldset>
<div class="row">
<div class="large-6 medium-6 columns">
<label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/></label>
<input id="form-submit" type="submit" class="button tiny" value="Submit" />
</div>
</div>
</form>
<script>
//-----------------------//
$('#facform').on('valid.fndtn.abide', function() {
var fileInput = document.getElementById('facform');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('qfile', file);
formData.append('kfile', file);
var form_url = 'getfiles.php';
$("#form-submit").hide();
$("#loadingimg").show();
$.ajax({
url: form_url,
type: 'POST',
data: formdata,
processData: false,
cache: false,
success: function(returnhtml){
$("#loadingimg").hide();
$("#facform").hide();
$("#smsg").html(returnhtml);
$("#facform")[0].reset();
}
//-----------------------//
});
});
</script>
使用Ajax或jQuery上传文件，您需要使用隐藏的iframe
这是ajaxfileupload.js类的完整示例，允许您使用上传表单。
或者您可以创建一个简单的函数，将表单提交到隐藏的iframe，然后使用jQuery作为响应获取iframe的body html或文本。
<html>
<head>
<link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
//YOUR URL TO RECEIVE THE FILE
url: 'http://localhost/testing/postfile.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(data.error);
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Ajax File Upload</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>
</tr>
<tr>
<td>Please select a file and click Upload button</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>