取消按钮功能错误

时间:2012-12-30 04:46:41

标签: jquery

我在错误控制台中收到以下错误,该错误在视图源中未显示问题所在:

typeError: $(...).text(...).html is not a function

但是,通过尝试找出错误来自错误的位置我认为是在我点击取消按钮后出现的下面的代码中:

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

我在google中找不到这个问题但有没有人在我的jquery代码中看到错误?如果出现错误,代码中的错误可能会导致控制台中的错误。

完整代码:

下面是html编码:

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

开始上传的功能:

    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;

            $(".sbtnimage").attr("disabled", "disabled");
            $(".sbtnvideo").attr("disabled", "disabled");
            $(".sbtnaudio").attr("disabled", "disabled");

            $(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 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('.imagef1_upload_process').css('visibility','hidden');
          $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
          $(sourceImageForm).find('.imagemsg').html(result);
          $(sourceImageForm).find('.imagemsg').css('visibility','visible'); 
          $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
          $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');

          $(".sbtnimage").removeAttr("disabled");
          $(".sbtnvideo").removeAttr("disabled");
          $(".sbtnaudio").removeAttr("disabled");

            $(".imageClear").on("click", function(event) {
            event.preventDefault();
            $(this).parents("form:first").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;   
    }

ImageclickHandler()函数:

  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> 



</body> 
</html>

更新2:

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消息,该消息没有改变。但是由于Barman导致了我所犯的错误

3 个答案:

答案 0 :(得分:1)

原因是stopImageUpload()需要2个参数,但是你只提供1个参数。第二个参数应该是文件名。然后使用此未定义的文件名参数调用htmlEncode(imagefilename),该参数调用$('<div/>').text(undefined).html()。 jQuery将$('<div/>').text(undefined)视为$('<div/>').text(),因此返回字符串""。然后它尝试调用"".html(),这是无效的。

修复方法是将filename参数传递给函数。但是我不知道你可以从哪里获取文件名,所以我想你可能只需删除试图将文件名放入DIV的代码。

答案 1 :(得分:0)

.text()返回字符串,它没有方法.html()

错误不是来自您发布的代码,可能是stopImageUpload

答案 2 :(得分:0)

只需替换:

return $('<div/>').text(value).html();

使用:

return $('<div/>').text(value).end().html();

$('<div/>').text(value);
return value;

更新:原始脚本有效:

小提琴:http://jsfiddle.net/z6VzH/