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 相关文章推荐
层叠菜单的动态生成
Oct 09 PHP
php 信息采集程序代码
Mar 17 PHP
PHP之COOKIE支持详解
Sep 20 PHP
PHP+MySQL删除操作实例
Jan 21 PHP
PHP速成大法
Jan 30 PHP
PHP多文件上传类实例
Mar 07 PHP
Zend Framework框架路由机制代码分析
Mar 22 PHP
php构造方法中析构方法在继承中的表现
Apr 12 PHP
php自定义函数转换html标签示例
Sep 29 PHP
php封装json通信接口详解及实例
Mar 07 PHP
laravel实现上传图片的两种方式小结
Oct 12 PHP
PHP中isset、empty的用法与区别示例详解
Nov 05 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获取apk包信息的方法
2014/08/15 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
5 cool javascript apps
2007/03/24 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python连接Impala实现步骤解析
2020/08/04 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
创业计划书六个要素
2013/12/26 职场文书
五一服装活动方案
2014/01/11 职场文书
演讲稿格式
2014/04/30 职场文书
学校搬迁方案
2014/06/15 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
小学生交通安全寄语
2015/02/27 职场文书
奔腾年代观后感
2015/06/09 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript