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>&nbsp;</td>
    <td>&nbsp;</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;" />