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>

查询：

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 支持函数的两个函数签名text()。当传递一个字符串时，它设置内容，然后返回 jquery 对象进行链接，当不传递任何内容（未定义）时，它返回一个字符串。在这种情况下，由于您传递undefined它返回一个字符串，然后您尝试调用html()一个不存在的字符串。

更新

好的，所以根据您发布的代码，您永远不应该stopImageUpload打电话1。这是由图像上传 PHP 逻辑处理的。正如您现在拥有的那样，您load在取消时在 iframe 的回调中调用它，这是不对的。这意味着当您单击时Cancel，它将通过将 iframe 源更改为 a 来取消上传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

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

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

如果你的意思是我理解的，你想将 msg 作为文本插入到 div 中，对吗？

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

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