如何在没有表格标签的情况下发送输入文件？

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

Answer 2

我找到了一个技巧。它有效，但我不确定这是好方法。

正如您的建议，我使用jQuery和ajax。

function sendUpgradeReq(id){
    var url = '/api/update.json';
    var form = $("#upgradeFrm");
    var data = new FormData(form[0]);

    $.ajax({
        type        : 'post',
        dataType    : 'json',
        url         : url,
        data        : data,
        enctype     : "multipart/form-data",
        cache       : false,
        contentType : false,
        processData : false,
        success     : function(data) {
            alert('Success!');
            $('#applyPop').css('display', 'none');
        },
        complete : function(data) {

        },
        error : function(data, status, error) {
            alert('Fail! :<');
            e.preventDefaultEvent();
        }
    });
}

我认为这里最重要的部分是new FormData()。它需要<input type='file'>的完整文件信息。

谢谢：D