• HTML5 中已经可以用 Ajax 上传文件了,而且代码非常简单,借助 FormData 类即可发送文件数据。


    <?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($('#form1')[0]); //这样可以,图片和文本都可以传输
    $.ajax({
    url: "test.php",
    type: "POST",
    processData: false,
    contentType: false,
    data: fd,
    success: function(d) {
    console.log(d);
    }
    });
    });
    </script>
    </body>
    </html>

    备注

     

  • 相关阅读:
    jmeter-实用插件
    python学习笔记
    TODO redis学习笔记
    查询redis数据
    【洛谷P1341】无序字母对
    【洛谷P1100】高低位交换
    【洛谷P1118】数字三角形
    【洛谷P1538】迎春舞会之数字舞蹈
    【洛谷P2947】向右看齐
    【洛谷P1351】[NOIP2014]联合权值
  • 原文地址:https://www.cnblogs.com/xkcp008/p/4562933.html
Copyright © 2020-2023  润新知