zoukankan      html  css  js  c++  java
  • 原生JS和jQuery版实现文件上传功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!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代码:

    1
    2
    3
    4
    5
    6
    7
    8
    <?php
    if (isset($_POST['upload'])) {
    var_dump($_FILES);
    move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
    //header('location: test.php');
    exit;
    }
    ?>
  • 相关阅读:
    Hibernate_一对多映射_2
    Hibernate框架_1 单表映射 _2
    JS
    Hibernate框架_1 单表映射
    Spring_1
    Javabean
    JAVA注解(JDK1.5开始)
    JAVA方法的反射
    JAVA-Reflect(反射)1
    Android初学:Gradle 'HelloWorld' project refresh failed
  • 原文地址:https://www.cnblogs.com/hjjun/p/9329451.html
Copyright © 2011-2022 走看看