Question

我有一段代码，通过确定上传成功，取消或不成功，它会显示相关消息：

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>

Answer 1

问题是你的stopImageUpload缺少一个参数。这是签名：

function stopImageUpload(success, imagefilename){

但你这样称呼它：

stopImageUpload(1);

这意味着您致电htmlEncode(undefined)，这会导致$('<div>').text(undefined).html()

jQuery支持text()函数的两个函数签名。传递一个字符串时，它设置内容，然后返回jquery对象进行链接，当没有传递任何内容（未定义）时，它返回一个字符串。在这种情况下，因为您传递undefined它返回一个字符串，然后您尝试在不存在的字符串上调用html()。

更新

好的，基于您发布的代码，您永远不应该使用stopImageUpload来调用1。这是由图像上传PHP逻辑处理的。就像你现在一样，你在取消时在iframe的load回调中调用它，这是不对的。这意味着当您点击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");

以前，只要你按下取消，就为“加载”添加了一个监听器，但是你永远不会删除它，所以即使稍后你试图上传一个图像并且它成功了，旧的监听器也会把它设置回来取消。这个新代码会在激活后删除侦听器，使其不太可能发生。

Answer 2

这是因为$（''）。text（value）返回一个字符串而不是jQuery对象。所以你不能追加html（）函数，因为它不存在。

return $("<div/>",{text:value}).html()

Answer 3

如果你的意思是我理解，你想把msg作为文本插入div，对吧？

所以你可以使用这段代码：

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

$（...）。text（...）。html不是收到的函数错误，如何修复它

3 个答案:

更新

更新2