Home > Article > Backend Development > Methods and examples of uploading images using php+html5+ajax

Methods and examples of uploading images using php+html5+ajax

墨辰丷Original: 2018-06-02 11:20:511201browse

This article mainly introduces the method of uploading images using php html5 ajax. It compares and analyzes the two ajax methods of js native and jQuery to upload images, as well as php image upload processing and other techniques. Friends in need can refer to it

The details are as follows:

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

<!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 版 */
  $(&#39;#upJQuery&#39;).on(&#39;click&#39;, 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>

##Summary: The above is this The entire content of this article is hoped to be helpful to everyone's study.

Related recommendations:

PHP implements the method of writing PDO classes based on singleton mode

PHP generates Tencent Cloud COS interface Required request signature

PHP imitation WeChat multi-image preview upload example detailed explanation

The above is the detailed content of Methods and examples of uploading images using php+html5+ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Methods and implications of implementing singleton pattern in PHPNext article：Methods and implications of implementing singleton pattern in PHP

See more

Methods and examples of uploading images using php+html5+ajax

Related articles