0

こちらからアクセスできるアプリケーションがあります。アプリケーションを開いた場合は、「追加」ボタンを数回クリックしてください。これにより、下のテーブルに新しい行が追加されます。テーブルの各行には、AJAX ファイル アップローダーがあります。

問題は、最初の行以外の行で「アップロード」ボタンをクリックすると、最初の行でのみアップロードが行われるため、最初のファイル入力のみがアップロードされることです。

なぜこれを行うのですか?ユーザーが「アップロード」ボタンをクリックすると、「アップロード」ボタンのその行内のファイル入力がアップロードされ、最初の行がアップロードされないようにするにはどうすればよいですか?

以下は、各テーブル行にアップロードされたファイル AJAX ファイルを追加する完全なコードです。

function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 


    var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload();' >" + 
    "<p id='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p id='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe id='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px solid #fff;'></iframe></form>");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr); 

}

function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}

アップデート：

現在のコード:

 var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>");

function stopUpload(success, source_form){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(source_form).find('.f1_upload_process').style.visibility = 'hidden';
      $(source_form).find('.f1_upload_form').innerHTML = result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      $(source_form).find('.f1_upload_form').style.visibility = 'visible';      
      return true;   
}

以下の行でエラーが発生するのはなぜですか。

$(source_form).find('.f1_upload_form').style.visibility = 'visible';
4

1 に答える 1

0

完全なコードが表示されない場合、問題は、1 つのドキュメント内で一意でなければならない ID を使用していることにあるようです。複数の要素が同じ ID を使用している場合、最良の場合、ブラウザーは最初の ID を使用します (ここではそうしています)。最悪の場合、何も機能しません。

新しいアップロード フォームを追加するときは、要素に一意の ID を指定する必要があります。windowたとえば、カウント変数を にアタッチするだけでそれを行うことができます。

$(document).ready( function(){ window.formCount=0; } );

次に、その番号を新しく追加されたフォームの ID に追加できます。

これとは別に、変数を使用することで、正しいフォームへの参照をthis運ぶこと ができます。onsubmit='startUpload(this);'function startUpload(f){...$(f).find(...)

これを機能させ、複数の ID の問題を解決する方法はたくさんあります。私がすること:var $fileImage = $("<form action...この形式では、id代わりに を使用しますclass。次に、上記のように、括弧に「this」を追加して、(同じ行の) onsubmit を変更します。次に、関数 startUpload を次のように変更します。

function startUpload(source_form){
  $(source_form).find('.f1_upload_process').css('visibility','visible');
  $(source_form).find('.f1_upload_form').css('visibility','hidden');
  return true;
}

ファイルを送信しているフォーム内の何かにアクセスしたい他の関数についても同じことをしなければなりません。関数呼び出しの括弧内を使用して、フォームへの参照を関数に渡しthis、次に上記のようにフォーム内のものにアクセスします。

于 2012-04-07T23:25:40.557 に答える