• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

    本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作。分享给大家供大家参考,具体如下:

    FormData的作用:

    FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单。当然FormData也可以动态的append数据。FormData的最大优点就是我们可以异步上传一个二进制文件。

    例1如下:

    !DOCTYPE HTML>
    html lang="zh-CN">
    head>
      meta charset="UTF-8">
      title>/title>
    /head>
    body>
      form method="post" id="myForm" onsubmit="return post();">
        用户名input type="text" name="uname" />
        密码input type="password" name="upwd" />
        邮箱input type="text" name="uemail" />
        input type="submit" name="submit" value="提交" />
      /form>
    /body>
    script type="text/javascript">
    function post() {
      var myForm = document.getElementById("myForm");
      //FormData既可以从表单读取数据,也可以动态append(键,值)添加
      var fd = new FormData(myForm);
    
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          alert(this.responseText);
        }
      };
      xhr.open("post", "post.php", true);
      xhr.send(fd);
      return false;
    }
    /script>
    /html>
    
    

    File API

    使用HTML5 DOM新增的File API,现在可以让网页要求用户选择本地文件,并且读取这些文件的信息了。

    通过File API,我们可以在用户选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象,这些对象被包含在一个FileList对象中。

    !DOCTYPE HTML>
    html lang="zh-CN">
    head>
      meta charset="UTF-8">
      title>/title>
    /head>
    body>
      form method="post" id="myForm">
        input type="file" name="file" id="upfile" />
        input type="submit" name="submit" value="提交" />
      /form>
    /body>
    script type="text/javascript">
      var upfile = document.getElementById("upfile");
      upfile.onchange = function() {
        var file = this.files[0];
        alert("文件名:" + file.name + "\r\n" + "大小:" + file.size + "\r\n");
      };
    /script>
    /html>
    
    

    我们通过FormData + File API 上传文件

    !DOCTYPE HTML>
    html lang="zh-CN">
    head>
      meta charset="UTF-8">
      title>/title>
    /head>
    body>
      form method="post" id="myForm">
        input type="file" name="file" id="upfile" />
        input type="submit" name="submit" value="提交" />
      /form>
    /body>
    script type="text/javascript">
      var myForm = document.getElementById("myForm");
      var upfile = document.getElementById("upfile");
    
      myForm.onsubmit = function() {
        //我们创建一个FormData对象
        var fd = new FormData();
        var file = upfile.files[0];
        //把文件添加到FormData对象中
        fd.append("file", file);
    
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            alert(this.responseText);
          }
        };
        xhr.open("post", "upfile.php", true);
        //发送FormData对象
        xhr.send(fd);
        return false;
      };
    /script>
    /html>
    
    

    upfile.php代码如下:

    ?php
    $uploadDir = './upload/';
    if(!file_exists($uploadDir)) {
      @mkdir($uploadDir, 0777, true);
    }
    $uploadFile = $uploadDir . basename($_FILES['file']['name']);
    if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
      echo "OK";
    } else {
      echo "NO";
    }
    
    

    使用对象URL来显示你所选择的图片

    通过window.URL.createObjectURL()和 window.URL.revokeObjectURL()两个DOM方法。

    这两个方法创建简单的URL字符串对象,用于指向任何 DOM File 对象数据,包括用户电脑中的本地文件。

    !DOCTYPE HTML>
    html lang="zh-CN">
    head>
      meta charset="UTF-8">
      title>/title>
    /head>
    body>
      form method="post" id="myForm">
        input type="file" name="file" id="upfile" />
        input type="submit" name="submit" value="提交" />
      /form>
    /body>
    script type="text/javascript">
      var myForm = document.getElementById("myForm");
      var upfile = document.getElementById("upfile");
    
      upfile.onchange = function() {
        //创建一个img标签
        var img = document.createElement("img");
        //通过file对象创建对象URL
        img.src = window.URL.createObjectURL(this.files[0]);
        img.height = 60;
        img.onload = function() {
          //释放对象URL
          window.URL.revokeObjectURL(this.src);
        };
        document.body.appendChild(img);
      };
    
      myForm.onsubmit = function() {
        //我们创建一个FormData对象
        var fd = new FormData();
        var file = upfile.files[0];
        //把文件添加到FormData对象中
        fd.append("file", file);
    
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            alert(this.responseText);
          }
        };
        xhr.open("post", "upfile.php", true);
        //发送FormData对象
        xhr.send(fd);
        return false;
      };
    /script>
    /html>
    
    

    更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

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

    您可能感兴趣的文章:
    • html form表单基础入门案例讲解
    • HTML的form表单和django的form表单
    • PHP使用HTML5 FormData对象提交表单操作示例
    • Asp.net webForm设置允许表单提交Html的方法
    • Java Web使用Html5 FormData实现多文件上传功能
    • transform实现HTML5 video标签视频比例拉伸实例详解
    • C#通过html调用WinForm的方法
    • HTML form表单提交方法案例详解
    上一篇:php的无刷新操作实现方法分析
    下一篇:php 的多进程操作实践案例分析
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析 php,下,html5,XHR2,FormData,File,