Ajax 不使用表单标记
Ajax not working with form tag
我正在学习ajax,我需要一些帮助。我插入了两个输入按钮,一个用于上传,第二个用于提交表单。当我删除表单选项卡上传按钮时,上传按钮有效,但提交按钮不起作用。
以下是 HTML 表单
<form id="register" name="register" method="post" action="" >
<table border="0" width="50%" cellpadding="2">
<tr>
<td>Product Name </td>
<td>:</td>
<td><input type="text" id="pname" name="pname" /></td>
</tr>
<tr>
<td>Category</td>
<td>:</td>
<td>
<select name="cateid" id="cateid"><?php
$sel="select * from mstcategory";
$swl=mysql_query($sel);
while($data=mysql_fetch_array($swl))
{
?>
<option value="<?php echo $data['category'] ?>"><?php echo $data['category'] ?></option><?php } ?>
</select>
</td>
</tr>
<tr>
<td>Detail</td>
<td>:</td>
<td><textarea name="detail" id="detail" cols="45" rows="5"></textarea>
</td>
</tr>
<tr>
<td>Image Location</td>
<td>:</td>
<td>
<input type="file" name="fileToUpload" id="fileToUpload">
<input name="uploadfile" type="submit" id="uploadfile" value="Upload" onclick="javascript:ajax_upload();" />
<?php $imgloc = '<div id="status"></div>' ?>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="submit" id="submit" value="Submit"/></td>
</tr>
</table>
以下是 head 部分中的 JavaScript
<script language="JavaScript" type="text/javascript">
function ajax_upload(){
var img = document.getElementById("fileToUpload").files[0];
var hr = new XMLHttpRequest();
var url = "fileupload.php";
var formdata = new FormData();
{
formdata.append("fileToUpload", img);
}
hr.onreadystatechange=function()
{
if(hr.readyState==4 && hr.status==200)
{
document.getElementById("status").innerHTML = hr.responseText;
}}
hr.open("POST",url,true);
hr.send(formdata);
document.getElementById("status").innerHTML = "Uploading...";
}
</script>
以下来自filupload.php
<?php
$target_dir = "image/";
$target_fileToUpload = $target_dir .basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_fileToUpload,PATHINFO_EXTENSION);
// Check if image fileToUpload is a actual image or fake image
//if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false)
{
$uploadOk = 1;
} else
{
echo "File is not an image.";
$uploadOk = 0;
}
//}
// Check if fileToUpload already exists
if (file_exists($target_fileToUpload)) {
echo "Sorry, fileToUpload already exists.";
$uploadOk = 0;
}
// Check fileToUpload size
if ($_FILES["fileToUpload"]["size"] > 50000000) {
echo "Sorry, your fileToUpload is too large.";
$uploadOk = 0;
}
// Allow certain fileToUpload formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "PNG"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF fileToUploads are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your fileToUpload was not uploaded.";
// if everything is ok, try to upload fileToUpload
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_fileToUpload)) {
echo $target_fileToUpload;
} else {
echo "Sorry, there was an error uploading your fileToUpload.";
}
}
?>
如果要上传文件,请将enctype="multipart/form-data"添加到表单中
<form .... enctype="multipart/form-data">
但是因为你使用 Ajax,你必须在请求中设置内容标头:
hr.open("POST",url,true);
hr.setRequestHeader("content-type","multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));
所以在那之后继续发送请求 hr.send()
并将 HTML 中的提交按钮行更改为:
<input name="uploadfile" type="button" id="uploadfile" value="Upload" onclick="javascript:ajax_upload(); return false;" />
相关文章:
- Ajax发布表单序列化,发布引号'
- JS验证ajax返回的html中的表单数据
- 将图像上传ajax与表单提交ajax相结合
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- 表单不会通过ajax提交
- Django-提交表单Ajax(替换Div)
- 在wordpress中添加带有短代码的联系表单ajax
- 成功后如何提交表单ajax帖子
- 同一页面上的多个表单AJAX
- 表单AJAX发送内部的twitter引导模式(Symfony2)
- 在Javascript中获取重力表单AJAX确认消息而不是输出
- HTML提交表单ajax响应
- Javascript表单AJAX样式
- 动态填充的Jquery表单;Ajax
- 对提交表单ajax帖子进行验证
- fanybox表单ajax post关闭提交
- jQuery表单:Ajax响应被显示,但是源代码中没有显示
- 重新加载提交表单Ajax调用
- 在jQuery上正常重新发送HTML表单ajax失败
- fanybox表单ajax提交,只有一个ajax请求