Question

**对于未来的读者**

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

ajax调用返回一个表结构，该结构放在表单标记内。

ADD ROW按钮克隆表格行，其中包含用于上载文件的链接（自定义文件输入作为锚标记）。

我正在使用来自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 - 返回的表格如下所示。该表位于上面的#reportstable div中。

<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') }

等对象

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

1 个答案: