1

アップロードが成功したか、キャンセルされたか、失敗したかを判断して、関連するメッセージを表示するコードがあります。

function stopImageUpload(success, imagefilename){


      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';      
         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
      }
      else if (success == 2){
          result = '<span class="imagemsg'+imagecounter+'"> The file upload was cancelled</span>';
      }
      else {
         result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span>';
      }


    });

アップロードの結果に応じて、各メッセージがいつ表示されるかを判断しようとしています。

iframe 読み込みの現在のコード:

$(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow;
                  stopImageUpload(2);

      $("iframe[name='upload_target_image']").on("load",function() {
      stopImageUpload(1);
    }).attr("src", "cancelimage.php");

iframe 読み込みの元のコード:

$(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow;

      $("iframe[name='upload_target_image']").on("load",function() {
      stopImageUpload(2);
    }).attr("src", "cancelimage.php");

元のコードで起こったことは、ファイルが正常にアップロードされたときに、一瞬成功 == 1 メッセージが表示されたのに、すぐに成功であるキャンセル メッセージが表示されたということでした - 2.

これは明らかに間違っていたので、修正しようとして、現在のコード ソリューションを試してみました。キャンセルすると、成功 == 2 メッセージが表示され、ファイルが成功した場合、成功 == 1 メッセージが表示されると思います。そのメッセージは変わりませんでした。

ただし、問題は、元のコードではこのエラーが発生しなかったのに、現在のコードではこの行の下にエラーが発生していることです。

function htmlEncode(value) { return $('<div/>').text(value).html(); }

表示されるエラーは次のとおりです。

typeError: $(...).text(...).html は関数ではありません

私の質問は、このエラーをどのように修正できますか? これを防ぐには、iframe の読み込みでコードを変更する必要があると想定しています。

アップデート：

HTML:

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
    <p class='imagef1_upload_form' align='center'><label>
    Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>
    <input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
    <input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>" +
    </p><p class='listImage' align='left'></p>" +
    <iframe class='upload_target_image' name='upload_target_image' src='#' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>

JQuery:

var sourceImageForm;

function htmlEncode(value) { return $('<div/>').text(value).html(); }

//Function for when file starts uploading

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');
  $(imageuploadform).find('.imagemsg').css('visibility','hidden');
  sourceImageForm = imageuploadform;

          $(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow;
                  stopImageUpload(2);

      $("iframe[name='upload_target_image']").on("load",function() {
      stopImageUpload(1);
    }).attr("src", "cancelimage.php");

}); 
      return true;
}

      var imagecounter = 0;

//Function for after upload has stopped

function stopImageUpload(success, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';      
         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
      }
      else if (success == 2){
          result = '<span class="imagemsg'+imagecounter+'"> The file upload was cancelled</span>';
      }
      else {
         result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span>';
      }

      $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

  var _imagecounter = imagecounter;

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
    var image_file_name = $(this).attr('image_file_name');

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
        .done(function(data) {

        $(".imagemsg" + _imagecounter).html(data);
    });

    $(this).parent().remove();
});

      return true;   
}

//clickHandler function which handle the submit when upload button is click

  function imageClickHandler(imageuploadform){ 
  if(imageValidation(imageuploadform)){ 
      window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
      return startImageUpload(imageuploadform); 
  } 
  return false;
}

PHP (ファイル サーバー側のアップロード):

<?php

ini_set('display_errors', 1);
error_reporting(E_ALL);


session_start();


if ($_FILES['fileImage']['error'] === UPLOAD_ERR_OK) {
$result = 0;


if (getimagesize($_FILES['fileImage']['tmp_name'])) {
if ((($_FILES["fileImage"]["type"] == "image/gif") || ($_FILES["fileImage"]["type"] == "image/jpeg") || ($_FILES["fileImage"]["type"] == "image/pjpeg") || ($_FILES["fileImage"]["type"] == "image/jpg")) && ($_FILES['fileImage']['size'] > 0)) {
if (is_file("ImageFiles/" . $_FILES['fileImage']['name'])) {
$parts = explode(".", $_FILES['fileImage']['name']);
$ext   = array_pop($parts);
$base  = implode(".", $parts);
$n     = 2;

while (is_file("ImageFiles/" . $base . "_" . $n . "." . $ext))
    $n++;
$_FILES['fileImage']['name'] = $base . "_" . $n . "." . $ext;

move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
$result = 1;


}

else {
move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
$result = 1;
}

}

}
} else {
echo "Upload was not successful";
}

?> 

<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php
echo $result;
?>, '<?php
echo $_FILES['fileImage']['name'];
?>');</script>
4

3 に答える 3

2

問題はstopImageUpload、引数が欠落していることです。その署名は次のとおりです。

function stopImageUpload(success, imagefilename){

しかし、あなたはそれを次のように呼びます：

stopImageUpload(1);

それはあなたが呼び出すことを意味しhtmlEncode(undefined)ます$('<div>').text(undefined).html()

jQuery は、関数に対して 2 つの関数シグネチャをサポートしていtext()ます。文字列を渡すと内容を設定してチェーン用の jquery オブジェクトを返し、何も渡さない (未定義) と文字列を返します。この場合、渡しているので文字列を返し、存在しない文字列undefinedを呼び出そうとします。html()

アップデート

さて、あなたが投稿したコードに基づいて、これまでに呼び出しstopImageUploadてはいけません1. これは、画像をアップロードする PHP ロジックによって処理されます。あなたが今持っているように、loadキャンセル時にiframeのコールバックでそれを呼び出していますが、これは正しくありません。つまり、 をクリックCancelすると、iframe ソースが に変更されてアップロードがキャンセルされ、cancelimage.phpその PHP が実行されると、アップロードが成功したと表示されますが、成功しませんでした。load実際には、クリック ハンドラからそのコールバックを完全に削除できると思います。

更新 2

あなたの問題は、「キャンセル」を複数回押すことに関連していると思います。これを試して：

var iframe = $("iframe[name='upload_target_image']");
iframe.on("load",function onLoad() {
    iframe.off("load", onLoad);
    stopImageUpload(2);
}).attr("src", "cancelimage.php");

以前は、キャンセルを押すたびに「ロード」のリスナーを追加していましたが、削除することはありませんでした。そのため、後で画像をアップロードしようとして成功した場合でも、古いリスナーはそれをキャンセル済みに戻していました。この新しいコードは、起動後にリスナーを削除するため、その可能性は低くなります。

于 2012-12-30T14:34:18.353 に答える
0

私が理解していることを意味する場合は、msg を div にテキストとして挿入しますよね?

このコードを使用できます：

var div = $('<div/>').text(value);
return div.html();
于 2012-12-30T14:22:09.903 に答える
0

これは、$('').text(value) が jQuery オブジェクトではなく文字列を返すためです。存在しないため、html() 関数を追加することはできません。

return $("<div/>",{text:value}).html()
于 2012-12-30T14:02:23.693 に答える