html+js 代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>Html5 Ajax 上传文件</title>
  5.      <meta charset="utf-8">
  6.  <script type="text/javascript">
  7.      var xhr;
  8.      function createXMLHttpRequest()
  9.      {
  10.          if(window.ActiveXObject)
  11.          {
  12.              xhr = new ActiveXObject("Microsoft.XMLHTTP");
  13.          }
  14.          else if(window.XMLHttpRequest)
  15.          {
  16.              xhr = new XMLHttpRequest();
  17.          }
  18.      }
  19.      function UpladFile()
  20.      {
  21.          var fileObj = document.getElementById("file").files[0];
  22.          var FileController = 'upload.php';
  23.          var form = new FormData();
  24.          form.append("myfile", fileObj);
  25.          createXMLHttpRequest();
  26.          xhr.onreadystatechange = handleStateChange;
  27.          xhr.open("post", FileController, true);
  28.          xhr.send(form);
  29.      }
  30.      function handleStateChange()
  31.      {
  32.          if(xhr.readyState == 4)
  33.          {
  34.              if (xhr.status == 200 || xhr.status == 0)
  35.              {
  36.                  var result = xhr.responseText;
  37.                  var json = eval("(" + result + ")");
  38.                  alert('图片链接:n'+json.file);
  39.              }
  40.          }
  41.      }
  42.  </script>
  43.  <style>
  44.      .txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
  45.      .mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
  46.      .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
  47.  </style>
  48.  </head>
  49.  <body>
  50.  <div class="form-group">
  51.      <label class="control-label">图片</label>
  52.      <br/>
  53.      <input type='text' name='textfield' id='textfield' class='txt' />
  54.      <span onclick="file.click()"  class="mybtn">浏览...</span>
  55.      <input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
  56.      <span onclick="UpladFile()" class="mybtn">上传</span>
  57.  </div>
  58.  </body>
  59.  </html>

php代码

  1.  <?php
  2.  if(isset($_FILES["myfile"]))
  3.  {
  4.  $ret = array();  //用来保存图片上传之后的路径，文件名
  5.  $uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;  // DIRECTORY_SEPARATOR常量，解析后为"/"为了兼容不同系统之间路径写法的区别
  1.  
  1.  $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir; //路径名,可以自己修改  
     7 file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777)); 
     if(!is_array($_FILES["myfile"]["name"])) //single file  
     9 {
      $fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension']; 
     move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName); //移动到指定$dir 目录下，该目录不存在会自动创建，重命名上传的文件
      $ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
      }
      echo json_encode($ret); 
     }
      ?>

php+原生ajax实现图片文件上传功能实例的更多相关文章

  1. springMVC图片文件上传功能的实现

    在工程依赖库下添加文件上传jar包 commons-fileupload-1.2.2.jar commons-io-2.4.jar 2.jsp页面设置form表单属性enctype 在表单中上传图片时 ...

  2. HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传

    这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...

  3. java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例

    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...

  4. iOS 的 Safari 文件上传功能详解

    iOS 6 给 Safari 浏览器带来的另外一个功能是文件上传,终于 Safari 终于支持 input 输入框的文件类型了,并且还支持 HTML媒体捕获(HTML Media Capture). ...

  5. .Net Core 图片文件上传下载

    当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...

  6. 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

    Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...

  7. 文件/大文件上传功能实现（JS+PHP）全过程

    文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...

  8. 使用element的upload组件实现一个完整的文件上传功能（下）

    本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...

  9. Vue实现多文件上传功能(前端 + 后端代码)

    本人业余前端开发,因为公司(很坑)觉得我很牛逼,所以让我前后端一起玩,无奈的我只能磕磕碰碰的研究起了vue. 开发项目的时候,用到文件上传的功能很常见,包括单文件上传和多文件上传,上传各种类型的文件. ...

随机推荐

  1. Java 8 – Map排序

    前提 Map是Java中最常用的集合类之一,这里整理了关于HashMap的排序 (关于List的排序,请查看Collections.sort()的doc或源码). 将无序的HashMap借助Strea ...

  2. tp3.2源码解析——入口文件

    如果有人读这篇文章并跟着做的话,希望你能使用支持函数跳转的编辑器,还要善用var_dump和exit,对着源码去调试着看.跟着入口文件读,执行到哪里你看到哪里,对于那些不能一眼看出来的配置,则要记录下 ...

  3. C#的哈希表Hashtable同步方法

    在多线程环境的操作中对Hashtable进行操作需要进行同步控制,有两种方法,一种是由.Net自动控制:一种是在代码中自己控制. 1.使用Hashtable.Synchronized进行同步 Hash ...

  4. 第6章 HDFS HA配置

    目录 6.1 hdfs-site.xml文件配置 6.2 core-site.xml文件配置 6.3 启动与测试 6.4 结合ZooKeeper进行自动故障转移 在Hadoop 2.0.0之前,一个H ...

  5. s3c2440系统时钟详解

    一.S3C2440系统时钟体系 S3C2440的时钟控制逻辑可以外接晶振,然后通过内部电路产生时钟源:也可以直接使用内部提供的时钟源,他们通过引脚的设置来选择.时钟逻辑给整个芯片提供了3中时钟:FCL ...

  6. GitLab 基本操作

    登录 在浏览其中输入http://192.168.3.11:8888 如图1登录界面.   图1 注:第一次新增用户,会发送修改密码链接到用户的邮箱中,用户会收到如图2邮件. 图2 2. 修改密码 点 ...

  7. 2017Facebook面试题改编“一面砖墙 ”

    题目:一面砖墙 这道题改编自网上Facebook去年的一道面试题,是hihoCoder的1494题(https://hihocoder.com/problemset/problem/1494) 这道题 ...

  8. Highchart 饼图联动

    感觉好久没有更新博客了,最近一直忙着毕业论文,紧接着就开始搭建数据库,实在抽不出时间写. 正好趁着做数据库,写一写关于Highchart里两个饼图之间的互动. 用到的数据比较大,我也懒得修饰了,涉及到 ...

  9. WPF ResourceDictionary 主题资源替换

    原文:WPF ResourceDictionary 主题资源替换 当我们需要在程序中替换主题,更换另一套背景.颜色.样式时,如何在不修改资源Key值,直接替换呢? 问题&疑问 1. Key值冲 ...

  10. 会声会影X10x9x8最新教程

    会声会影X10x9x8最新最全教程,全部都是干货,包含素材的,下载地址:百度网盘, https://pan.baidu.com/s/1AyVS-C_VcTEz_ir70u08xQ 以下为部分内容截图: ...