How to upload images using php html5 ajax, _PHP tutorial-PHP Tutorial-php.cn

How to upload images using php html5 ajax, _PHP tutorial

WBOY

Release： 2016-07-12 08:52:00

Original

756 people have browsed it

php html5 ajax implements the method of uploading images,

This article describes the example of php html5 ajax implementing the method of uploading images. Share it with everyone for your reference, the details are as follows:

<&#63;php
if (isset($_POST['upload'])) {
  var_dump($_FILES);
  move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
  //header('location: test.php');
  exit;
}
&#63;>

Copy after login

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>HTML5 Ajax Uploader</title>
  <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<p><input type="file" id="upfile"></p>
<p><input type="button" id="upJS" value="用原生JS上传"></p>
<p><input type="button" id="upJQuery" value="用jQuery上传"></p>
<script>
  /*原生JS版*/
  document.getElementById("upJS").onclick = function() {
    /* FormData 是表单数据类 */
    var fd = new FormData();
    var ajax = new XMLHttpRequest();
    fd.append("upload", 1);
    /* 把文件添加到表单里 */
    fd.append("upfile", document.getElementById("upfile").files[0]);
    ajax.open("post", "test.php", true);
    ajax.onload = function () {
      console.log(ajax.responseText);
    };
    ajax.send(fd);
  }
  /* jQuery 版 */
  $('#upJQuery').on('click', function() {
    var fd = new FormData();
    fd.append("upload", 1);
    fd.append("upfile", $("#upfile").get(0).files[0]);
    $.ajax({
      url: "test.php",
      type: "POST",
      processData: false,
      contentType: false,
      data: fd,
      success: function(d) {
        console.log(d);
      }
    });
  });
</script>
</body>
</html>

Copy after login

Readers who are interested in more PHP related content can check out the special topics of this site: "Summary of PHP File Operations", "Summary of PHP Operations and Operator Usage", "Summary of PHP Network Programming Skills", "Introduction Tutorial on PHP Basic Grammar" ", "Summary of PHP office document operation skills (including word, excel, access, ppt)", "Summary of PHP date and time usage", "Introduction to PHP object-oriented programming tutorial", "Summary of PHP string (string) usage" , "Introduction Tutorial on PHP MySQL Database Operation" and "Summary of Common PHP Database Operation Skills"

I hope this article will be helpful to everyone in PHP programming.