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 に答える