Ajax 不适用于表单标签

Question

我正在学习 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.";
    }
}
?> 

Answer 1

如果您想上传文件，请将 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;" />