zoukankan      html  css  js  c++  java
  • ajax无刷新上传文件

    网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点。只有ajax还不行,还需要JavaScript的FormData对象配合才行,且这里我们使用jQuery的ajax。

    第一步,创建FormData对象

    创建FormData的方式有两种:

    1、基于HTML表单

    <form action="upload.php" id="uploadForm">
        <input type="file" name="file">
        <input type="text" name="CustomField" value="This is some extra data">
    </form>

    上面的HTML代码是一个简单的表单,这里form表单可以不用添加enctype="multipart/form-data"的属性

    var fd = new FormData($('#uploadForm')[0]);

    2、不使用HTML表单

    HTML只需要一个file类型的input就可以了

    <input type="file" id="file">  

    然后创建

    var fileInput = $("#file")[0];
    var fileObj = fileInput.files[0]; //这里只选择一个文件
    var fd = new FormData();
    fd.append("file", fileObj);
    fd.append("CustomField", "Extra data");

    第二步,使用ajax上传

    $.ajax({
      url: "upload.php",
      type: "POST",
      data: fd,
      processData: false,  // 不处理数据
      contentType: false   // 不设置内容类型
    });

    这样就实现了无刷新上传文件了。

    更详细的使用说明,包括使用原生的XMLHttpRequest对象提交ajax请求上传文件,可以参考下面的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

  • 相关阅读:
    Python基础05
    Python基础04
    Python基础03
    Python基础02
    Python基础01
    软件测试
    深入了解软件测试基础04
    深入了解软件测试基础03
    深入了解软件测试基础02
    深入了解软件测试基础01
  • 原文地址:https://www.cnblogs.com/liyuchuan/p/11774377.html
Copyright © 2011-2022 走看看