0

以下は私のJavaScriptコードであり、ユーザーがフォームの「アップロード」ボタンをクリックすると、「imageValidation」でチェックを行い、ファイル入力が正しいかどうかを確認し、正しい場合は「startImageUpload()」関数に、ファイル入力が正しくない場合、「画像ではありません」という警告を表示し、「startImageUpload」関数に移動しないようにする必要があります。

問題は、これをまったく行っていないことです。ユーザーが [アップロード] ボタンをクリックしても、アラートは表示されず、アップロードも行われず、何も起こりません。上記の段落を達成するには何が必要ですか?

以下はフォームです。

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='imageClickHandler(this); return false;' class='imageuploadform' >" + 
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></form>");

以下は、ユーザーが「アップロード」ボタンをクリックすると、以下のこの関数に従います。

  function imageClickHandler(){ 
     if(imageValidation()){ 
     startImageUpload(imageuploadform); 
     } 
}

以下は、ファイル入力を検証する imageValidation() 関数ですが、これが正しく機能しているかどうかわかりません。

function imageValidation() {

        $(".fileImage").change(function() {

          var val = $(this).val();

        switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
            case 'gif': case 'jpg': case 'png':
                return true;
                break;
            default:
                $(this).val('');
                // error message here
                alert("not an image");
                return false;
                break;
        }

    });

    }

以下は、入力ファイルの検証を試みる前に機能することがわかっている「startImageUpload()」関数です。

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;

      return true;
}
4

3 に答える 3

4

あなたonsubmitはいつも戻ってきますfalse...

の結果を返すように変更しますimageClickHandler

 <form .... onsubmit="return imageClickHandler(this);">

JS関数を戻り値に変更します

 function imageClickHandler(form){ 
      if(imageValidation()){ 
          return startImageUpload(form); 
      } 
      return false;
  }

imageValidationまた、関数にデフォルトの戻り値があることを確認してください（関数return false;の最後の行に追加してください）

編集：

ユーザーがファイルを選択したときに検証が行われないようにするには、変更イベントのリッスンを削除し、検証を次のように変更します。

function imageValidation() {
    var val = $(".fileImage").val();
    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif':
        case 'jpg': 
        case 'png':
             return true;
        default:
            $(".fileImage").val('');
            // error message here
            alert("not an image");
            return false;
    }
    return false;
}
于 2012-04-14T00:28:30.037 に答える
2

いくつかのこと。まず、検証の結果が 2 つの結果のいずれかをトリガーする可能性があります: do it または alert. ただし、アラートの結果は、結果が返された後に結果が返された後ではなく、検証関数内でダウンしています。それを上に移動して、if-then-else を使用することを提案します。コードスタイルのもの。

次に、imageClickHandler は imageuploadform という JS オブジェクトを使用しています。そのような JS オブジェクトはどこにも定義されていません。imageuploadform クラスがアタッチされた dom 要素があります。しかし、それは同じことではありません。html/js 全体が表示されていないことを認めます。

3 番目に、imageClickHandler に引数が渡されますが、関数定義では引数が定義されていません。意図は何でしたか？

行き詰まった場合は、プログラムの実行を追跡するために、一時的にアラート メッセージをあちこちに散らばってみてください。それは、実行がどこに向かっているか、またはそうでないかを教えてくれるかもしれません。

Yaron が言ったように、startUpload がバックグラウンドで実際のアップロードを行っていない場合、onClick から潜在的に「真」の結果を返す必要があります。「false」を返すと、php ページに移動しないことが保証されます。

function imageClickHandler(){ 
   var imageuploadform = $('form.imageuploadform').get(0);
   if(imageValidation()){  
      startImageUpload(imageuploadform); 
      return true; 
   } 
   else {
      alert("not an image");
      return false;
   } 
}

function imageValidation() { 

   $(".fileImage").change(function() { 

      var val = $(this).val(); 

      switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
         case 'gif': case 'jpg': case 'png': 
            return true; 
            break; 
         default: 
            return false; 
            break; 
      } 

   }); 

}

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler();' class='imageuploadform' >" +  
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" + 
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></
于 2012-04-14T00:21:31.567 に答える
0

検証からスイッチを完全に削除し、テスト目的で単に alert() を返そうとしましたか?

おそらく、「val」の変数が jQuery val() と混同していませんか? 別の var 名を使用してみてください。

  var val = $(this).val();
            $(this).val('');
于 2012-04-14T00:10:36.540 に答える