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


Posted in PHP onMay 14, 2016

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

<?php
if (isset($_POST['upload'])) {
  var_dump($_FILES);
  move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
  //header('location: test.php');
  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 版 */
  $('#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>

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
web目录下不应该存在多余的程序(安全考虑)
May 09 PHP
php 操作调试的方法
Jul 12 PHP
php页面缓存ob系列函数介绍
Oct 18 PHP
深入apache host的配置详解
Jun 09 PHP
使用PHP获取当前url路径的函数以及服务器变量
Jun 29 PHP
使用php验证复选框有效性的示例
Nov 13 PHP
实现PHP多线程异步请求的3种方法
Jan 17 PHP
ThinkPHP连接数据库及主从数据库的设置教程
Aug 22 PHP
php中删除、清空session的方式总结
Oct 09 PHP
浅谈PHP中其他类型转化为Bool类型
Mar 28 PHP
windows环境下使用Composer安装ThinkPHP5
May 18 PHP
PHP中__set()实例用法和基础讲解
Jul 23 PHP
yii2使用ajax返回json的实现方法
May 14 #PHP
php文件上传类完整实例
May 14 #PHP
Smarty高级应用之缓存操作技巧分析
May 14 #PHP
php生成Android客户端扫描可登录的二维码
May 13 #PHP
php短信接口代码
May 13 #PHP
php实现在线通讯录功能(附源码)
May 13 #PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
May 13 #PHP
You might like
PHP中常用数组处理方法实例分析
2008/08/30 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
php适配器模式简单应用示例
2019/10/23 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python jieba库用法及实例解析
2019/11/04 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
联想C++笔试题
2012/06/13 面试题
日期和时间问题
2015/01/04 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
高级护理实习生自荐信
2013/09/28 职场文书
启动仪式策划方案
2014/06/14 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
端午节寄语2015
2015/03/23 职场文书
2015年城市管理工作总结
2015/05/23 职场文书