我可以将图像表单数据传递给PHP函数进行上传吗？

Question

我正在尝试使用jquery和PHP来上传这样的图像：

HTML

<form id="form-photo" enctype="multipart/form-data"><
  <span class="btn btn-small fileinput-button">
    <span>Add Photo</span>
    <input type="file" name="photo-img" id="photo-img">
  </span>
</form>

当前的jquery框架如下所示：

$('#photo-img').change(function(){
    var file = this.files[0];

    //console.log(file);
    name = file.name;
    size = file.size;
    type = file.type;

    // I'll do some validation here before proceeding

    var formData = new FormData($('#form-photo'));

    console.log(formData);

   // How do I pass the image form data to a PHP function via jquery?

});

我可以通过jquery post将formData传递给PHP函数吗？

Answer 1

经过测试并处理Goolge Chrome，Opera，Firefox，Safari。
的 doesn't work with IE8 or lower

的Javascript

创建FormData对象，并在file

的帮助下将photo-img索引POST及XMLHttpRequest附加到您的服务器

$(function() {
  $('#photo-img').change(function(){
    var file  = this.files[0];

    // do your validation here

    var formData  = new FormData();
    formData.append( 'photo-img', file ); // append the file to form data

    var xhr = false;
    if ( typeof XMLHttpRequest !== 'undefined' ) {
      xhr = new XMLHttpRequest();
    }
    else {
      var versions  = [ "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp" ];
      for( var i = 0, len = versions.length; i < len; i++ ) {
        try {
          xhr = new ActiveXObject( versions[i] );
          break;
        }
        catch(e) {}
      }
    }
    if ( xhr ) {
      // replace test.php with your own upload script url
      xhr.open( "POST", "test.php", true );
      xhr.onreadystatechange  = function() {
        if ( this.readyState === 4 && this.status == 200 ) {
          var response  = this.response || this.responseText;

          /** Do Something with the reponse **/
          response  = $.parseJSON( response );
          if ( response && response.message ) {
            window.alert( response.message );
          }

        }
      }
      // now send the formData to server
      xhr.send( formData );
    }
  });
});

PHP

服务器端更好的图像上传处理并返回JSON对象作为响应

<?php
  if ( isset( $_FILES["photo-img"] ) ) {
    $error  = false;
    $image  = $_FILES["photo-img"];
    $code   = (int)$image["error"];
    $valid  = array( IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF );
    $folder = dirname( __FILE__ )."/upload/"; // path to folder to where you want to move uploaded file
    $target = $folder.$image["name"];

    if ( !file_exists( $folder ) ) {
      @mkdir( $folder, 0755, true ) ;
    }

    if ( $code !== UPLOAD_ERR_OK ) {
      switch( $code ) {
        case UPLOAD_ERR_INI_SIZE:
          $error  = 'Error '.$code.': The uploaded file exceeds the <a href="http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize" target="_blank" rel="nofollow"><span class="function-string">upload_max_filesize</span></a> directive in php.ini';
        break;
        case UPLOAD_ERR_FORM_SIZE:
          $error  = 'Error '.$code.': The uploaded file exceeds the <span class="const-string">MAX_FILE_SIZE</span> directive that was specified in the HTML form';
        break;
        case UPLOAD_ERR_PARTIAL:
          $error  = 'Error '.$code.': The uploaded file was only partially uploaded';
        break;
        case UPLOAD_ERR_NO_FILE:
          $error  = 'Error '.$code.': No file was uploaded';
        break;
        case UPLOAD_ERR_NO_TMP_DIR:
          $error  = 'Error '.$code.': Missing a temporary folder';
        break;
        case UPLOAD_ERR_CANT_WRITE:
          $error  = 'Error '.$code.': Failed to write file to disk';
        break;
        case UPLOAD_ERR_EXTENSION:
          $error  = 'Error '.$code.': A PHP extension stopped the file upload';
        break;
        default:
          $error  = 'Error '.$code.': Unknown upload error'; 
        break; 
      }
    }
    else {
      $iminfo = @getimagesize( $image["tmp_name"] );
      if ( $iminfo && is_array( $iminfo ) ) {
        if ( isset( $iminfo[2] ) && in_array( $iminfo[2], $valid ) && is_readable( $image["tmp_name"] ) ) {
          if ( !move_uploaded_file( $image["tmp_name"], $target ) ) {
            $error  = "Error while moving uploaded file";
          }
        }
        else {
          $error  = "Invalid format or image is not readable";
        }
      }
      else {
        $error  = "Only image files are allowed (jpg, gif, png)";
      }
    }
    if ( empty( $error ) ) {
      echo json_encode( array( "error" => 0, "message" => "Upload success!" ) );
    }
    else {
      echo json_encode( array( "error" => 1, "message" => $error ) );
    }
    exit();
  }
?>

Answer 2

您可以在jquery中使用$ .ajax方法并将表单数据发送到php文件。

 $.ajax({
  type: "POST",
  url: "http://localhost/index.php",
  data: data,
  success: success,
});

Answer 3

请注意，$ .post和$ .ajax非常相似（默认情况下除$ .ajax使用type = get，您必须将其更改为type = post）。您可以使用$ .ajax更好地控制内容，但$ .post更加流式化 - 将$ .post视为执行AJAX POST的简便方法。但是，由于$ .ajax通常比$ .post更具结构性，对于那些刚接触AJAX的人来说，尝试添加修饰符（例如dataType:JSON，contentType甚至{{1} }。

Ajax代码是这样的：

async:false

---

请注意，从PHP文件返回的任何数据都会进入您在AJAX调用的成功函数中的 HTML文档中，并且必须处理那里。这就是您将接收到的数据插入DOM的位置。

例如，假设您的HTML文档包含$('#photo-img').change(function(){ var file = this.files[0]; //console.log(file); name = file.name; size = file.size; type = file.type; $.ajax({ type: "POST", url: "your_php_file.php", data: 'f_name=' +name+ '&f_size=' +size+ '&f_type=' +type, success: function(whatigot) { alert('Server-side response: ' + whatigot); } //END success fn }); //END $.ajax }); //END dropdown change event 的DIV。要将PHP中的数据插入到HTML文档中，请将以下行替换为id="myDiv"：

alert('Server-side response: ' + whatigot);

您的DIV现在包含从PHP文件回显的数据。

---

在PHP方面，它基本上是这样的：

$('#myDiv').html(whatIgot);

---

请参阅this example，了解其工作原理。

请注意，上面的示例使用jQuery，因此在页面的标记中需要此引用：

<?php
    $file_name = $_POST['f_name'];
    $file_size = $_POST['f_size'];
    $file_type = $_POST['f_type'];

    //Here is where you do some stuff, such as MySQL lookups, etc
    //Then build the response to send back (default is HTML, unless 
    //you specify something else like JSON)

    $r = 'The PHP File received:<br><br>';
    $r .= '
        <ul>
            <li>File Name: ' .$file_name.'</li>
            <li>File Size: ' .$file_size.'</li>
            <li>File Type: ' .$file_type.'</li>
        </ul>
    ';
    echo $r;