0

我在通过 ajax 提交表单时遇到问题，如果没有 ajax，它提交时没有任何问题。

如果我自己使用它，图像会正确上传：

<form id="edit_image1_form" action="upload_file.php" method="post" enctype="multipart/form-data">
    <img id="edit_image1" src="<?php echo $venue_image_upload_one; ?>" alt="" />
    <input type="file" name="file" id="file" onchange="readURL1(this);" style="width:155px;"><br>
    <input type="submit" id="upload_image1_submit" name="upload_image1_submit" value="Update Image">
</form>

但是当我添加这个它给我一个错误并且没有上传完成：

$("#upload_image1_submit").click(function() {

        var url = "upload_file.php"; 

        $.ajax({
               type: "POST",
               url: url,
               data: $("#edit_image1_form").serialize(), //form name here
               success: function(data)
               {
                  alert(data); 

               }
             });

            return false; 
        });

The error is Invalid File from here:

<?php
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = end($temp);

    if ((($_FILES["file"]["type"] == "image/gif")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/jpg")
    || ($_FILES["file"]["type"] == "image/pjpeg")
    || ($_FILES["file"]["type"] == "image/x-png")
    || ($_FILES["file"]["type"] == "image/png"))
    && ($_FILES["file"]["size"] < 20000)
    && in_array($extension, $allowedExts))
      {

      if ($_FILES["file"]["error"] > 0)
        {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
        }
      else
        {
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("upload/" . $_FILES["file"]["name"]))
          {
          echo $_FILES["file"]["name"] . " already exists. ";
          }
        else
          {
          move_uploaded_file($_FILES["file"]["tmp_name"],
          "upload/" . $_FILES["file"]["name"]);
          echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
          }
        }
      }
    else
      {
      echo "Invalid file"; //HERE
      }
?>

但我的问题是，如果我提交没有 ajax 的表单，我将不会收到此错误，并且我一直在上传以进行测试的图像是同一个。

关于这可能是什么的任何想法？

4

2 回答 2

2

请参阅简单地发送序列化表单不会在 post 参数中发送图像，您需要附加文件。这是一个示例代码，我曾经用它来使用 ajax 上传图像，效果很好。

 var imageUploaded = '';    
    formdata = false;                      
    if (window.FormData) {
        formdata = new FormData();
    }            
    var reader, file;   
    if(jQuery('input[type=file]').get(0).files.length){
        file = jQuery('input[type=file]').get(0).files[0];  
        if (!!file.type.match(/image.*/)) {
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) { 
                };
                reader.readAsDataURL(file);
            }
            if (formdata) {
                formdata.append("images[]", file);
            }
        }       
        if (formdata) {

            jQuery.ajax({
                url: "your url",
                type: "POST",
                data: formdata,
                dataType: 'json',
                processData: false,
                contentType: false,
                async: false,
                success: function (res) {   
                    //do something here
                }
            });
        }

在您的控制器或 ajax url 页面中，使用$_FILES["images"]["name"].. 获取图像。希望这可能有助于您的需要。

于 2013-09-20T10:54:56.927 回答
0

使用 XHR2，您可以使用 FormData 对象通过 AJAX 上传，但据我所知，旧版浏览器不支持此功能。

否则，您可以执行以下操作：

var form = new FormData();
form.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
       type: "POST",
       url: url,
       data: form,
       success: function(data)
       {
          console.log(data); 
       }
});
于 2013-09-20T10:51:34.453 回答