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

【问题标题】：How can I send input file without form tag?如何发送没有表单标签的输入文件？
【发布时间】：2015-01-02 20:18:33
【问题描述】：

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

用户单击某个按钮，它会显示一个 div 弹出窗口。
用户使用<input type='file'> 输入文件。
用户按下按钮。
向服务器发送数据，div 弹出关闭。

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

起初，我试图发送带有<form> 标记的数据，它工作正常。问题是当我提交表单时它会更改页面。

所以我要做的是在不使用form 标签的情况下发送文件数据。我已经搜索了网页，它看起来似乎是不可能的。有没有其他方法可以在 div pop up 中发送文件数据？

谢谢:D

【问题讨论】：

您试图以错误的方式解决问题：解决方案不是删除表单，而是阻止表单提交并使用 Ajax 发送数据。这绝对不是不可能的。
看看api.jquery.com/jquery.post
你可以在 jQuery Ajax 的帮助下做到这一点。
@jogesh_pi 但也不发送表单
@kpull1，抱歉我的错误我没有描述插件，对于文件或上传图片我使用了这个插件，malsup.com/jquery/form 会做相应的事情。

标签： javascript jquery html file input

【解决方案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

【讨论】：

如何使用 ajax 发布文件？
我现在看到 OP 已将问题更改为文件上传，起初这不是问题 ;)
不——它从一开始就说，在编辑之前；）
啊好吧，没注意到。我把我的答案改成了希望对 OP 有用的东西 :)
感谢您的代码，但这里最大的问题是文件上传:)

【解决方案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

【讨论】：