Methods and examples of uploading images using php+html5+ajax-PHP Tutorial-php.cn

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

墨辰丷

Release： 2023-03-29 13:56:02

Original

1284 people have browsed it

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;
}
?>

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 版 */
  $(&#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>

Copy after login

##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!