1

**将来の読者のために**

私は答えを受け入れましたが、この問題は私には解決されていません。ユーザーdbfは明らかに彼のものを知っており、おそらく彼の答えはあなたのために働くでしょう。そうでない場合は、お詫び申し上げます。水深が深すぎて、これに費やす時間がないので、コードを作り直して、カスタムファイル入力の機能を削除しました。プロジェクトを完了してから、可能であれば、このコードに戻ってソリューションを投稿します。しかし、結局のところ、ユーザーdbfは多大な労力を費やし、信用に値します。

ajax呼び出しは、フォームタグ内に配置されるテーブル構造を返します。

[行の追加]ボタンは、ファイルをアップロードするためのリンク（アンカータグとしてのカスタムファイル入力）を使用して、テーブルの行を複製します。

ここから、INPUT TYPE=FILE要素をjquery-custom-file-input.jsプラグインに置き換えています。このjqueryプラグインを使用すると、任意の要素をファイル入力要素に変換できるため、ファイル入力要素としてアンカータグを使用し#change_pdています。しかし、実際にファイルをアップロードするために、最小限のドキュメントには「入力要素をフォーム要素に添付する」と書かれています。

このStackOverflowの質問はまさにこの問題に対処していますが、私の場合はそれを機能させることができませんでした。

標準の送信ボタンはフォームを送信し、アップロードされたファイルを除くすべてが受信されます。

HTML-AJAXで生成されたテーブルがDIV#reportstable内に挿入されます

<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に入れ、$POSTデータで受信される非表示の入力ファイル#new_pdに入れます。

ただし、ファイル自体はアップロードされません。

.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>ことがわかります。これは、フォームに要素が含まれないことを意味します。そのため、ファイルをアップロードせず、選択したファイル名のみを受け取ります。<input type="file" multiple>bodyid="AFrm"<input type="file">

プラグインを適応させて、次のようなオブジェクトを介してオプションとしてパラメーターによって指定された特定のフォームに入力を追加することができます。{ 'form':$('#AFrm') }

于 2012-09-12T22:49:43.077 に答える