php教程分享

  1. php教程首页
  2. php上传下载

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

•php上传下载•阅读 327

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

本文实例讲述了php+html5+ajax实现上传图片的方法，分享给大家供大家参考，具体如下：

  1. <?php
  2. if (isset($_POST['upload'])) {
  3. var_dump($_FILES);
  4. move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
  5. //header('location: test.php');
  6. exit;
  7. }
  8. ?>
  9. <!doctype html>
  10. <html >
  11. <head>
  12. <meta charset="utf-8">
  13. <title>HTML5 Ajax Uploader</title>
  14. <script src="jquery-2.1.1.min.js"></script>
  15. </head>
  16. <body>
  17. <p><input type="file" ></p>
  18. <p><input type="button" value="用原生JS上传"></p>
  19. <p><input type="button" value="用jQuery上传"></p>
  20. <script>
  21. /*原生JS版*/
  22. document.getElementById("upJS").onclick = function() {
  23. /* FormData 是表单数据类 */
  24. var fd = new FormData();
  25. var ajax = new XMLHttpRequest();
  26. fd.append("upload", 1);
  27. /* 把文件添加到表单里 */
  28. fd.append("upfile", document.getElementById("upfile").files[0]);
  29. ajax.open("post", "test.php", true);
  30. ajax.onload = function () {
  31. console.log(ajax.responseText);
  32. };
  33. ajax.send(fd);
  34. }
  35. /* jQuery 版 */
  36. $('#upJQuery').on('click', function() {
  37. var fd = new FormData();
  38. fd.append("upload", 1);
  39. fd.append("upfile", $("#upfile").get(0).files[0]);
  40. $.ajax({
  41. url: "test.php",
  42. type: "POST",
  43. processData: false,
  44. contentType: false,
  45. data: fd,
  46. success: function(d) {
  47. console.log(d);
  48. }
  49. });
  50. });
  51. </script>
  52. </body>
  53. </html>
赞 (8)
上一篇2-22
下一篇 8-1

相关推荐

  • 基于PHP的AJAX技术实现文件异步上传

    基于PHP的AJAX技术实现文件异步上传异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到，必须解决的问题。但是标准的AJAX类(XmlHttpRequest)无法实现传输文件的功能。因此，这里讨论的内容就是如何在AJAX的技术…
    •php上传下载
    2016-08-2318247

  • PHP+apc+ajax实现的ajax_upload上传进度条代码

    本文实例讲述了PHP+apc+ajax实现的ajax_upload上传进度条代码，分享给大家供大家参考，具体如下：上传进度条是怎么实现的呢?原理是怎么样的呢?当我们浏览，选择上传后，会产生一个临时文件，上传的时把这个临时文件，上传到服务器，上传完成后，这个临时文件会被删除掉。如果我们能读取这个临时文件的大小，就知道上传进度是多少了，phpapc模块可以实现这个功能。一、安装apc模块下载地址:ht…
    •php上传下载
    2023-06-05267

  • php+html5使用FormData对象提交表单及上传图片的方法

    这篇文章主要介绍了php+html5使用FormData对象提交表单及上传图片的方法,实例分析了FormData对象的使用技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法。分享给大家供大家参考。具体分析如下：FormData对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。…
    •php图像处理
    2023-06-14304

  • 学习PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能。典型的场景包括用户头像上传、相册图片上传等。当需要上传的文件比较大的时候，提供一个显示上传进度的进度条就很有必要了。在PHP5.4以前，实现这样的进度条并不容易，主要有三种方法:使用Flash,Java,ActiveX使用PHP的APC扩展使用HTML5的FileAPI第一种方法依赖第三方的浏览器插件，通用性不足，且易带来安全隐患。不过由于Flash的使用比较…
    •php上传下载
    2023-08-07295
  • php上传多张图片时，选择图片后即可预览的问题php上传下载

    php上传多张图片时，选择图片后即可预览的问题

    这几天一直在解决一个问题，上传图片时选择成功后就能预览。需求：在点击上传图标的时候会在前面的input框中显示出文件名，然后点击后面的查看按钮就可以预览选择的这张图片了，要求不能刷新页面1.一开始的时候打算用ajax上传，后来发现多张图片一同上传的时候会出现问题，ajax上传图片的原理是当你选中一张图片的时候会使用js在这个type为file的input的框外面包上一个form表单然后通过ajax…
    2023-08-07199
  • 如何利用PHP实现上传图片功能详解php上传下载

    如何利用PHP实现上传图片功能详解

    这篇文章主要给大家介绍了关于如何利用PHP实现上传图片功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。HTML文件一、设置编码UTF-8对于中文网页需要使用<metacharset="utf-8">声明编码，否则会出现乱码。二、form表单<form>标签用于为用户输入创建HTML表单，表…
    2023-08-07341
  • jQuery+PHP实现图片上传并提交功能php上传下载

    jQuery+PHP实现图片上传并提交功能

    图片上传思路：通过ajax实现图片上传，然后把PHP返回的图片地址，加入到隐藏字段中，最后通过表单提交给后台PHP，代码如下。HTML代码zimg.html文件：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wid…
    2023-08-07256
  • KindEditor在php环境下上传图片功能集成的方法示例php上传下载

    KindEditor在php环境下上传图片功能集成的方法示例

    KindEditor是一套开源的在线HTML编辑器,后台可与Java、.NET、PHP、ASP等程序集成。为实现图文混排的编辑效果，我们通常都会用到编辑器的图片上传功能，本文会简单讲一下KinEditor的基本使用，主要说明如何在php环境下，集成编辑器的图片上传功能！KindEditor官方下载：http://kindeditor.net/down.phpKindEditor编辑器的基本使用：h…
    2023-08-07263