form表单文件上传问题

FormData单文件异步上传

formdata.html

  

    

    

      

        

      

      

        

          

          

          

          

          

          

          上传文件:

          

        

      

    

    

    

  

upload.php内容如下:

print_r(json_encode($_FILES));    

var_dump(json_encode($_POST));

formdata多文件异步上传.html

  

    

    

    

    

  

  

    

      

      

    

    

    

    

      $(document).ready(function() {

        var fileList = [];

        var fileCatcher = document.getElementById("form_example");

        var files = document.getElementById("files");

        var fileListDisplay = document.getElementById("file-list-display");

        // fileCatcher.addEventListener("submit", function(event) {

        //   event.preventDefault();

        //   //上传文件

        //   sendFile();

        // });

        // sendFile = function() {

        //   var formData = new FormData();

        //   var request = new XMLHttpRequest();

        //   console.dir(files.files);

        //   //循环添加到formData中

        //   [].forEach.call(files.files, function(file) {

        //     // formData.append("files[]", file, file.name);

        //     formData.append("files[]", file);

        //   });

        //   request.open("POST", "upload.php");

        //   request.send(formData);

        //   request.onload = function() {

        //     console.log(JSON.parse(request.responseText));

        //   };

        // };

        // 张~: 多图片上传触发事件

        // function uploadImgs(_this, event) {

        //   // 实例FormData

        //   var data = new FormData();

        //   for (var i = 0; i < event.target.files.length; i++) {

        //     var files = event.target.files[i];

        //     // 批量添加文件

        //     data.append("file[]", files);

        //   }

        //   // 异步提交 ajaxUpload(data);

        // }

        // 页面展示上传文件信息

        // files.addEventListener("change", function(event) {

        //   for (var i = 0; i < files.files.length; i++) {

        //     fileList.push(files.files[i]);

        //   }

        //   renderFileList();

        // });

        // renderFileList = function() {

        //   fileListDisplay.innerHTML = "";

        //   fileList.forEach(function(file, index) {

        //     var fileDisplayEl = document.createElement("p");

        //     fileDisplayEl.innerHTML = index + 1 + ":" + file.name;

        //     fileListDisplay.appendChild(fileDisplayEl);

        //   });

        // };

        // ajax异步多文件上传

        files.addEventListener("change", function(event) {

          var formdata = new FormData();

          for (var i = 0; i < this.files.length; i++) {

            formdata.append("file[]", this.files[i]);

          }

          renderFileList(formdata);

        });

        renderFileList = function(formdata) {

          var request = new XMLHttpRequest();

          request.open("POST", "upload.php");

          request.send(formdata);

          request.onload = function() {

            console.log(JSON.parse(request.responseText));

          };

        };

      });

    

  

upload.php内容如下:

print_r(json_encode($_FILES));

form表单同步多文件上传

add-todos.php

function add()

{

  // 目标：接收客户端提交的数据和文件，最终保存到数据文件中

  // TODO: 接收提交的文本内容

  // TODO: 接收海报文件

  // TODO: 接收音乐文件

  // TODO: 

  print_r($_FILES);

  var_dump($_POST);

}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

  add();

}

?>

  

  

  

  

    添加新音乐

    

---

    

      

        

      

    

    " method="post" enctype="multipart/form-data">

      

        标题