1

アプリで複数ファイルのアップロード フィールドを使用しています<input name="filesToUpload" id="filesToUpload" type="file" multiple />。

私が達成したいのは、ユーザーが選択したファイルをリストし、リスト内のファイルを削除できるようにすることです。最後に、フォームが送信されると、FormDataオブジェクトを使用して AJAX 経由でデータ全体をバイナリとして送信します。

削除部分を除いて、すべてうまく機能します。

属性が読み取り専用であることはわかっているFileListので、隠し入力フィールドの値としてファイルを配布しli、ファイル名をリストするそれぞれの場所に追加しました。そのため、ユーザーが項目を削除するliと、非表示の入力フィールドも一緒に削除され、最後に残りの項目をすべてFormDataオブジェクトに追加して収集します。

問題は、ファイルを非表示の入力に値として割り当てようとするたびに、奇妙な結果が得られたことです。

私のコードは次のようなものです：

listFiles : function () {
    var file, files, filesList, filesLength, read;

    files = this.files;
    filesList = $('.files');
    filesLength = files.length;

    // Clear the list
    filesList.html('');

    for ( var i = 0; i < filesLength; i++ ) {
        file = files[i];

        // This is to read the content of the file
        read=new FileReader();
        read.readAsBinaryString( file );

        // When reading is finished
        read.onloadend = function() {
           filesList.append(
                    '<li>' + 
                    '<span class="fileName">' + file.name + '</span>' + 
                    '<a href="#" class="deleteAttachment">x</a>' +
                    '<input type="hidden" name="file[]" value="' + read.result +'"/>' +
                    '</li>');
         }
     }
  }

最後のファイルからデータを取得するだけです。また、データがいたるところに印刷されるため、DOM が壊れています。

デモはこちら => http://jsfiddle.net/zKyXC/

4

2 に答える 2

2

上記の方法を実装するためにさまざまな方法を試しました (ファイルの削除機能を許可するために、各個別のファイルを input[type="hidden"] フィールドの値に割り当てます) が、どれも成功しませんでした。現時点では、これが可能かどうかはまったくわかりません。

ただし、別の解決策で問題を解決することができました。他の誰かが役に立つと思った場合に備えて、ここにあります。

使用する代わりにinput[type="hidden"]、ファイルを受信したときにファイルを保存するグローバル配列を使用しました。次に、配列からオブジェクトを削除する標準的な方法で、その配列から項目を削除します。最後に、各項目をformDataオブジェクトに追加してサーバーに送信します。

次のようにグローバル配列を作成して入力します。

globals.files =[].slice.call( this.files );

私はこのようにそれから削除します:

$.each( files, function( index, val ) {
            if ( this.name === fileText ) {
                globals.files.splice( index, 1 );
            }
        });

注：fileText削除するアイテムの名前を保存する場所です。

そして最後に私はそれを追加しますformData:

var formData = new FormData();

$.each( files, function( ind, val ) {
            formData.append( 'files[]', this );
       });

そして、これをdata標準の jQuery ajax 呼び出しのプロパティとして送信します。

于 2012-05-23T09:16:52.427 に答える
0

私が間違ってい"なければ、引用符の付いたファイルだけが間違っていて、エスケープしないとvalue、の最初の出現時に切り捨てられ"、残りの部分がhtmlとして表示されるので、必要なのは

read.result.replace(/"/g, '&quot;');
于 2012-05-22T10:11:54.640 に答える