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

Question

** FOR FUTURE READERS **

Although I accepted an answer, this problem is not resolved for me. User dbf obviously knows his stuff and perhaps his answer will work for you. If it doesn't, I apologize. The waters are too deep for me, and I'm out of time to spend on this, so I have reworked my code to remove the custom-file-input niceties. I'll get my project completed and then, if possible, return to this code and post my solution. At the end of the day, however, user dbf put in a lot of effort and deserves the cred.

---

An ajax call returns a table structure, which gets placed inside form tags.

An ADD ROW button clones a table row, with a link (custom-file-input as anchor tag) for uploading a file.

I am replacing the INPUT TYPE=FILE element with the jquery-custom-file-input.js plugin, from here. This jquery plugin allows to turn any element into a file input element, so I am using an anchor tag #change_pd as the file input element. But to actually upload the file, the minimal documentation says to "attach the input element to a form element."

This StackOverflow question addresses exactly this issue, but I haven't been able to make it work in my case.

A standard submit button submits the form, where everything is received except the uploaded file.

---

HTML - An AJAX-generated table is inserted inside DIV #reportstable

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

---

AJAX - the returned table looks like this. The table is placed within div #reportstable, above.

<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 - This is the code to insert a file. It does put the chosen filename into the SPAN as text, and into the hidden input file #new_pd, which is received in the $POST data.

However, the file itself is not uploaded.

I am not sure where to put the .appendTo(), or how to write the jquery. Here is what I tried. Everything works except the .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 - If anyone can recommend a better (preferred?) custom-file-input plugin, I'm all ears.

Answer 1

If you look at the code from the plugin you gave

    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();

then you will see that the <form> and <input type="file" multiple> are appended to the body. This means that your form with id="AFrm" will not contain any <input type="file"> element and that's why you are not uploading any file but only receive the selected name of the file.

You could adapt the plugin to append the input to a specific form given by a parameter as an option through an object like { 'form':$('#AFrm') }