您的当前位置:首页正文

jquery使用FormData实现异步上传文件

2020-11-27 来源:筏尚旅游网

这样一来,解决问题的思路就出来了:

  • 每次选中文件并确认后,<input>会触发change事件,在onchange事件处理函数中处理即可。
  • 创建一个FormData对象,并将选中的文件追加进去。
  • 使用Ajax发送这个FormData对象。
  • 下面用一个Demo展示具体的代码实现用FormData将文件发送到一个php:

    <html>
    <head>
     <title>Upload</title>
     <meta charset="utf-8">
    </head>
    <body>
     <input id="file-input" type="file">
    
     <script>
     var input = document.getElementById('file-input');
     input.onchange = function () {
     var data = new FormData();
     data.append('file', input.files[0]);
    
     var request = new XMLHttpRequest();
     request.open('POST', './upload.php');
     request.send(data);
     };
     </script>
    </body>
    </html>
    显示全文