jQuery 自定义文件输入插件 - 文件未上传

Question

** 面向未来的读者 **

虽然我接受了答案，但这个问题并没有为我解决。用户dbf 显然知道他的东西，也许他的回答对你有用。如果没有，我道歉。水对我来说太深了，我没有时间花在这上面，所以我重新编写了我的代码以删除自定义文件输入的细节。我将完成我的项目，然后，如果可能，返回此代码并发布我的解决方案。然而，归根结底，用户 dbf 付出了很多努力，值得信任。

---

ajax 调用返回一个表格结构，该结构被放置在表单标签内。

添加行按钮克隆表格行，并带有用于上传文件的链接（自定义文件输入作为锚标记）。

我正在用来自here 的 jquery-custom-file-input.js 插件替换 INPUT TYPE=FILE 元素。这个 jquery 插件允许将任何元素转换为文件输入元素，因此我使用锚标记 #change_pd 作为文件输入元素。但是要实际上传文件，最小的文档会说“将输入元素附加到表单元素”。

This StackOverflow question 正好解决了这个问题，但我无法让它在我的情况下工作。

一个标准的提交按钮提交表单，除了上传的文件之外的所有内容都被接收。

---

HTML - 在 DIV #reportstable 中插入 AJAX 生成的表格

<form action="" method="post" name="upd" enctype="multipart/form-data" id="AFrm">
    <div id="reportstable">
    </div>
</form>

---

AJAX - 返回的表如下所示。该表位于上面的 div #reportstable 中。

<table id="DocTable">
<tr>
    <td>New Document</td>
    <td>
        <span id="span_pd"></span>
        <input type="hidden" id="proj_id" name="proj_id" value="'.$project_id.'">
        <input type="hidden" id="status_pd" name="status_pd">
    </td>
    <td>
        <a id="change_pd" href="#">change</a>
        <input type="hidden" id="new_pd" name="new_pd">
    </td>
</tr>
</table>

---

JQUERY - 这是插入文件的代码。它确实将所选文件名作为文本放入 SPAN，并放入隐藏的输入文件#new_pd，该文件在 $POST 数据中接收。

但是，文件本身并没有上传。

我不确定将 .appendTo() 放在哪里，或者如何编写 jquery。这是我尝试过的。除 .appendTo() 外，一切正常。

$(document).on('click','#change_pd',function() {
    $(this).file().choose(function(e, input) {
        $('#new_pd').val(input.val());
        $('#span_pd').html(input.val());
        $('#span_pd').css('color','grey');
        $('#status_pd').val('CHANGED');
    });
    $(this).css('text-transform','uppercase');
    $(input).appendTo('#AFrm').
        attr('name', 'a-name').
        attr('id', 'an-id');
    });

---

PS - 如果有人可以推荐一个更好的（首选？）自定义文件输入插件，我会全力以赴。

Answer 1

如果您查看您提供的插件中的代码

    var file = $('<div><form></form></div>').appendTo('body').css({
        'position': 'absolute',
        'overflow': 'hidden',
        '-moz-opacity': '0',
        'filter':  'alpha(opacity: 0)',
        'opacity': '0',
        'z-index': '2'      
    });

    var form = file.find('form');
    var input = form.find('input');

    function reset() {
        var input = $('<input type="file" multiple>').appendTo(form);
        input.change(function(e) {
            input.unbind();
            input.detach();
            btn.trigger('choose', [input]);
            reset();
        });
    };
    reset();

然后您将看到<form> 和<input type="file" multiple> 附加到body。这意味着您的带有id="AFrm" 的表单将不包含任何<input type="file"> 元素，这就是您不上传任何文件而只接收所选文件名称的原因。

您可以调整插件以通过 { 'form':$('#AFrm') } 之类的对象将输入附加到由参数作为选项给出的特定表单中