【问题标题】:Upload image using ajax and PHP使用ajax和PHP上传图片
【发布时间】:2016-08-10 03:48:31
【问题描述】:

这是我的问题。我尝试上传图像,并借助此 URL 将图像存储在数据库中的相应文件夹和图像路径中。

http://www.lionblogger.com/how-to-upload-file-to-server-using-php-save-the-path-in-mysql/

当我尝试这种方式时,我会得到正确的答案。在我尝试使用 AJAX 的相同代码后无法正常工作。我不知道我犯了什么错误。下面是我的代码。

HTML 代码

<div class="input-group form-group">
<label> Upload Your Photo </label>                            
<input type="file" name="upload_photo" id="upload_photo">
</div>
<div class="">
<input type="submit"  class="btn btn-success btn-lg " name="upload_files" id="upload_files" value="UPLOAD" >
</div>

AJAX 代码

$("#upload_files").click(function(event){
        event.preventDefault();
        var upload_photo1 = $('#upload_photo').val();
        var photo= upload_photo1.split('\\').pop().split('/').pop();
        var datas="photo="+photo;
    alert(datas);
     if(photo==''){
      sweetAlert({
        title: "WARNING!!!",
        text: "Please Upload All Corresponding Documents And Try Again !!!!",
        type: "warning"
      });
     } else {
    $.ajax({
        type: "POST",
        url: 'php/upload_files.php',
        data:datas
        }).done(function( data ) {
            alert(data);
         });
    }
});

还有我的 PHP 文件 上传文件.php

<?php
    $fileExistsFlag = 0; 
    $fileName = $_POST['photo'];
    var_dump($fileName);
    $link = mysqli_connect("localhost","root","","spark") or die("Error ".mysqli_error($link));

    $query = "SELECT filename FROM filedetails WHERE filename='$fileName'"; 
    $result = $link->query($query) or die("Error : ".mysqli_error($link));
    while($row = mysqli_fetch_array($result)) {
        if($row['filename'] == $fileName) {
            $fileExistsFlag = 1;
        }       
    }

    if($fileExistsFlag == 0)
    { 
        $target = "files/";     
        $fileTarget = $target.$fileName;    
        $tempFileName = $_FILES["fileName"]["tmp_name"];
        $fileDescription = $_POST['Description'];   
        $result = move_uploaded_file($tempFileName,$fileTarget);
        $ext = end(explode('.', $fileName));
        if ($_FILES["fileName"]["size"] > 2097152)
         {
         echo "Sorry, your file is too large.";
         $uploadOk = 0;
         }
      else if($ext != "jpg" && $ext != "png" && $ext != "jpeg"&& $ext != "gif" ) 
      {
         echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
         $uploadOk = 0;
      }
    else
    {
        if($result) { 
            echo "Your file <html><b><i>".$fileName."</i></b></html> has been successfully uploaded";       
            $query = "INSERT INTO filedetails(filepath,filename,description) VALUES ('$fileTarget','$fileName','$fileDescription')";
            $link->query($query) or die("Error : ".mysqli_error($link));            
        }
        else {          
            echo "Sorry !!! There was an error in uploading your file";         
        }
    }   
        mysqli_close($link);
    }

    else {
        echo "File <html><b><i>".$fileName."</i></b></html> already exists in your folder. Please rename the file and try again.";
        mysqli_close($link);
    }   
?>

我得到的错误是

请承担我的疑虑.. PHP初学者。请帮助我解决这个问题。

【问题讨论】:

  • 您只在 ajax 请求中发送文件名(如果有),而不是文件的内容。有关文件上传的示例代码,请参阅链接主题。

标签: php jquery mysql ajax


【解决方案1】:

问题是您没有传递文件数据 - 只是名称。 在您链接的示例中,有一个正在提交的表单(使用 enctype="multipart/form-data" 这意味着您正在传递二进制数据)。

php代码通过变量$_FILES["Filename"]["tmp_name"]访问文件数据;因为在上传文件时,它会存储在一个临时文件夹中,并带有一个临时的内部名称(即 tmp_name 元素)。 通过简单地将索引中的“文件名”更改为“文件名”并不能为您提供实际的文件数据。

所以一个快速的解决方案是将输入字段包装在一个实际的表单中(使用 enctype="multipart/form-data"),捕获提交事件并在 ajax 调用中传递整个表单数据 - 所以而不是

data:datas

你通过了

data: new FormData(this)

在此处查看示例: http://www.formget.com/ajax-image-upload-php/

编辑:@khandelwaldeval 击败了我 ;-)

【讨论】:

    【解决方案2】:

    你的代码看起来很复杂,试试这个

                <form id="picupload">
                <input type="file" accept="image/png, image/jpeg, image/gif" id="upload_photo" name="upload_photo" Required/>
                <button type="submit" name="save" class="btn btn-theme step6"></button>
                </form>
    

    用于提交的javascript

            <script>
             $("#picupload").submit(function(e) {
    
                    $.ajax({
                      url: "php/upload_files.php", 
                          type: "POST",             
                          data: new FormData(this), 
                          contentType: false,       
                          cache: false,            
                          processData:false,      
                                    success: function(data)
                                    {
                                     alert(data);
                                     }
    
                                  });
             e.preventDefault(); 
             });
    
            </script>
    

    使用您的 php 代码处理文件

            <?php
             $fileExistsFlag = 0; 
             $fileDescription ='No idea where this came from';
             $fileName = $_POST['upload_photo'];
             $link = mysqli_connect("localhost","root","","spark") or die("Error ".mysqli_error($link));
    
             $query = "SELECT filename FROM filedetails WHERE filename='$fileName'"; 
             $result = $link->query($query) or die("Error : ".mysqli_error($link));
             while($row = mysqli_fetch_array($result)) {
                 if($row['filename'] == $fileName) {
                     $fileExistsFlag = 1;
                 }       
             }
    
             if($fileExistsFlag == 0)
             { 
                 $target = "files/";     
                 $fileTarget = $target.$fileName;    
                 $tempFileName = $_FILES["upload_photo"]["tmp_name"];
                 $result = move_uploaded_file($tempFileName,$fileTarget);
                 $ext = end(explode('.', $fileName));
                 if ($_FILES["upload_photo"]["size"] > 2097152)
                  {
                  echo "Sorry, your file is too large.";
                  $uploadOk = 0;
                  }
               else if($ext != "jpg" && $ext != "png" && $ext != "jpeg"&& $ext != "gif" ) 
               {
                  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
                  $uploadOk = 0;
               }
             else
            {
                if($result) { 
                    echo "Your file <html><b><i>".$fileName."</i></b></html> has been successfully uploaded";       
                    $query = "INSERT INTO filedetails(filepath,filename,description) VALUES ('$fileTarget','$fileName','$fileDescription')";
                    $link->query($query) or die("Error : ".mysqli_error($link));            
                }
                else {          
                    echo "Sorry !!! There was an error in uploading your file";         
                }
            }   
                mysqli_close($link);
            }
    
            else {
                echo "File <html><b><i>".$fileName."</i></b></html> already exists in your folder. Please rename the file and try again.";
                mysqli_close($link);
            }   
            ?>
    

    【讨论】:

      【解决方案3】:

      您在 js 和 php 中的代码存在严重问题。您根本没有上传文件。您刚刚上传了文件名。没有描述作为输入,但在您的 php 代码中,您有一个未处理的描述变量。您处理了名称错误的文件。
      尝试使用 FormData 上传文件。首先,使用带有id的form标签

      <form id='myform'>
      <div class="input-group form-group">
      <label> Upload Your Photo </label>                            
      <input type="file" name="upload_photo" id="upload_photo">
      </div>
      <div class="">
      <input type="submit"  class="btn btn-success btn-lg " name="upload_files" id="upload_files" value="UPLOAD" >
      </div>
      </form>
      

      在js中,

          formData = new FormData($("#myForm")[0]);
          formData.append("photo", photo);//your photo name
      

      在AJAX请求中,写

       data: formData,
      

      在你的 php 文件中

      <?php
       $fileExistsFlag = 0; 
       $fileDescription ='No idea where this came from';
       $fileName = $_POST['photo'];
       $link = mysqli_connect("localhost","root","","spark") or die("Error ".mysqli_error($link));
      
       $query = "SELECT filename FROM filedetails WHERE filename='$fileName'"; 
       $result = $link->query($query) or die("Error : ".mysqli_error($link));
       while($row = mysqli_fetch_array($result)) {
           if($row['filename'] == $fileName) {
               $fileExistsFlag = 1;
           }       
       }
      
       if($fileExistsFlag == 0)
       { 
           $target = "files/";     
           $fileTarget = $target.$fileName;    
           $tempFileName = $_FILES["upload_photo"]["tmp_name"];
           $result = move_uploaded_file($tempFileName,$fileTarget);
           $ext = end(explode('.', $fileName));
           if ($_FILES["upload_photo"]["size"] > 2097152)
            {
            echo "Sorry, your file is too large.";
            $uploadOk = 0;
            }
         else if($ext != "jpg" && $ext != "png" && $ext != "jpeg"&& $ext != "gif" ) 
         {
            echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
            $uploadOk = 0;
         }
       else
      {
          if($result) { 
              echo "Your file <html><b><i>".$fileName."</i></b></html> has been successfully uploaded";       
              $query = "INSERT INTO filedetails(filepath,filename,description) VALUES ('$fileTarget','$fileName','$fileDescription')";
              $link->query($query) or die("Error : ".mysqli_error($link));            
          }
          else {          
              echo "Sorry !!! There was an error in uploading your file";         
          }
      }   
          mysqli_close($link);
      }
      
      else {
          echo "File <html><b><i>".$fileName."</i></b></html> already exists in your folder. Please rename the file and try again.";
          mysqli_close($link);
      }   
      ?>
      

      【讨论】:

      • 在 js 文件中这张照片是什么意思.. 我在那一行出错了
      • Uncaught ReferenceError: photo is not defined 这是错误
      • @KavyaShree var photo= upload_photo1.split('\\').pop().split('/').pop(); 它来自您自己的代码。代码不完整。你得自己写完整的代码
      • 但我不知道如何使用formdata
      猜你喜欢
      • 2010-12-06
      • 2014-12-02
      • 1970-01-01
      • 2013-11-16
      • 2017-06-05
      • 2014-12-01
      • 2015-05-05
      • 2019-02-06
      相关资源
      最近更新 更多