masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > pembangunan bahagian belakang > tutorial php > php+html5+ajax实现上传图片的方法及实例

php+html5+ajax实现上传图片的方法及实例

墨辰丷
Lepaskan： 2023-03-29 13:56:02
asal
1284 orang telah melayarinya

这篇文章主要介绍了php+html5+ajax实现上传图片的方法,对比分析了js原生及jQuery两种ajax调用上传图片的方法,以及php图片上传处理等技巧,需要的朋友可以参考下

具体如下：

<?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;
}
?>
Salin selepas log masuk

<!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>
Salin selepas log masuk

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

PHP基于单例模式实现编写PDO类的方法

PHP生成腾讯云COS接口需要的请求签名

PHP仿微信多图片预览上传实例详解

Atas ialah kandungan terperinci php+html5+ajax实现上传图片的方法及实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
h5 php
sumber：php.cn
Artikel sebelumnya：php实现单例模式的方法及含义 Artikel seterusnya：详解如何在CentOS7中使用Nginx和PHP7-FPM安装Nextcloud
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Muat naik berbilang fail imej dalam CodeIgniter menggunakan Ajax dan PHP Saya menghadapi masalah memuat naik berbilang fail imej ke bahagian pelayan. Alangkah baik...
daripada 2024-04-03 22:35:03
0
1
318
PHP tidak mengenali kandungan yang dihantar oleh Ajax Saya tidak boleh mendapatkan PHP untuk membaca teks yang dihantar melalui Ajax. index.html...
daripada 2024-04-02 21:25:42
0
1
341
PHP AJAX tidak mengemas kini secara dinamik walaupun consolelog mempunyai nilai yang betul Saya cuba mengemas kini $_POST['kategori'] dengan mengklik butang. Saya cuba menggunakan A...
daripada 2024-04-02 17:50:59
0
1
396
Opencart 2: Panggil fail php menggunakan Ajax Saya ingin ajax memanggil fail php sistem/pembantu yang saya buat yang memanggil kaedah pa...
daripada 2024-03-31 23:09:02
0
1
348
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan