javascript - 如何发送没有表单标签的输入文件？

Question

我正在尝试使用 HTML 和 JavaScript 将文件发送到服务器。如下场景:

1. 用户点击某个按钮，它会弹出一个 div。
2. 用户输入文件 <input type='file'> .
3. 用户按下按钮。
4. 将数据发送到服务器，div 弹出窗口关闭。

请注意，所有这些操作都发生在一个页面中。只能打开和关闭弹出的div。

起初，我试图用 <form> 发送数据标签，它工作正常。问题是当我提交表单时它改变了页面。

所以我想做的是在不使用 form 的情况下发送文件数据标签。我在网上搜索过，它看起来有点不可能。有没有其他方法可以在 div 弹出窗口中发送文件数据？

谢谢:D

Answer 1

您是否考虑过通过 JQuery 来实现？

您可以在不刷新的情况下发布这样的值:

$('#button').on('click', function(){
   $.post('/url/to/your/function', {'post': value}, function(data){
      if(data !== 0) {

      }
   }, "json");
});

您可以找到更多信息 here

编辑:

用 jQuery $.post 上传文件是不可能的，尽管如此，有了文件 API 和 XMLHttpRequest，用 AJAX 上传文件是完全可能的，你甚至可以知道已经上传了多少数据......

$('input').change(function() 
{
    var fileInput = document.querySelector('#file');

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/');

xhr.upload.onprogress = function(e) 
{
    /* 
    * values that indicate the progression
    * e.loaded
    * e.total
    */
};

xhr.onload = function()
{
    alert('upload complete');
};

// upload success
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
    // if your server sends a message on upload sucess, 
    // get it with xhr.responseText
    alert(xhr.responseText);
}

var form = new FormData();
form.append('title', this.files[0].name);
form.append('pict', fileInput.files[0]);

xhr.send(form);
}

更多信息 here