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 相关文章推荐
PHP 和 XML: 使用expat函数(三)
Oct 09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
Feb 15 PHP
php在字符串中查找另一个字符串
Nov 19 PHP
php汉字转拼音的示例
Feb 27 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
May 10 PHP
ThinkPHP中的系统常量和预定义常量集合
Jul 01 PHP
PHP调用wsdl文件类型的接口代码分享
Nov 19 PHP
PHP 数组基本操作小结(推荐)
Jun 13 PHP
php版微信公众账号第三方管理工具开发简明教程
Sep 23 PHP
php 静态属性和静态方法区别详解
Apr 09 PHP
PHP判断json格式是否正确的实现代码
Sep 20 PHP
laravel框架中视图的基本使用方法分析
Nov 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开发环境
2015/07/28 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
JavaScript使用cookie
2007/02/02 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
python获取整个网页源码的方法
2020/08/03 Python
医学专业毕业生推荐信
2013/11/14 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
感恩教育月活动总结
2014/07/07 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2014年教研组工作总结
2014/11/26 职场文书
劳资员岗位职责
2015/02/13 职场文书
求职简历自我评价范文
2015/03/10 职场文书
放假通知格式
2015/04/14 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js