1

** 面向未来的读者 **

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

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

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

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

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

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

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

4

1 回答 1

0

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

    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>and<input type="file" multiple>被附加到body. 这意味着您的表单id="AFrm"将不包含任何<input type="file">元素，这就是您不上传任何文件而只接收所选文件名称的原因。

您可以调整插件以通过像这样的对象将输入附加到由参数作为选项给出的特定形式{ 'form':$('#AFrm') }

于 2012-09-12T22:49:43.077 回答