-1

我在附加 imageNameArray 时遇到问题，它应该显示已上传的文件名。

问题是，假设我之前上传了一个文件（pig.png），当我刷新页面并上传另一个文件（panda.png）时，当我上传文件时，它应该显示'panda.png'。但它会附加上一个上传文件的名称 (pig.png)，而不是附加 panda.png。

如果我再次刷新页面并上传另一个文件（tiger.png），那么当我上传文件时，它应该显示“tiger.png”。但它仍然只是附加先前上传文件的名称（panda.png），而不是附加tiger.png。

如果我上传另一个文件（不刷新页面），例如monkey.png，那么它会再次附加panda.png。没有猴子.png。所以它应该附加tiger.png和monkey.png，而是附加panda.png和panda.png。

我想要的是，当一个文件被上传时，它的名字被附加了。但是如何才能做到这一点呢？请展示如何修复它的编码示例，因为我发现它比解释为什么会发生这种情况更容易:)

下面是发生附加的 javascript 代码：

    <?php
    session_start();

    $idx = count($_SESSION ['fileImage'] - 1);
    $output = isset($_SESSION ['fileImage'][$idx]) ?
        $_SESSION ['fileImage'][$idx]['name'] : "";

    ?>

<script type="text/javascript">

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

function startImageUpload(imageuploadform){

              $(".imageCancel").click(function() {
              $('.upload_target').get(0).contentwindow
          return stopImageUpload();
    });

      return true;
}

    function stopImageUpload(success){
        var imageNameArray = new Array();
        imageNameArray = <?php echo $output ?>;
        var result = '';

        if (success == 1){
            result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';

            for(var i=0;i<imageNameArray.length;i++)
            {
                $('.listImage').append(imageNameArray[i]+ '<br/>');
            }
        }
        else {
            result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
        }
        return true;
    }

</script>

<body>

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



</body>

下面是 php 脚本 (imageupload.php)，它从上面的 javascript 函数上传另一个页面上的文件：

<?php
session_start();

$result = 0;
$errors = array ();
$dirImage = "ImageFiles/";

if (isset ( $_FILES ['fileImage'] ) &&
    $_FILES ["fileImage"] ["error"] == UPLOAD_ERR_OK) {

    $fileName = $_FILES ['fileImage'] ['name'];

    $fileExt = pathinfo ( $fileName, PATHINFO_EXTENSION );
    $fileExt = strtolower ( $fileExt );

    $fileDst = $dirImage . DIRECTORY_SEPARATOR . $fileName;

        if (count ( $errors ) == 0) {
            if (move_uploaded_file ( $fileTemp, $fileDst )) {
                $result = 1;
        }
    }
}

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

1 回答 1

1

问题是当 PHP 代码呈现页面时，您正在输出上传文件的名称，这是在（下一个）图像上传之前。

这发生在stopImageUpload()JavaScript 函数的这一行：

imageNameArray = <?php echo $output ?>;

有几种方法可以解决这个问题，但我会选择通过stopImageUpload()函数将文件名传回的直接方法。

// stolen from http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding
function htmlEncode(value) { return $('<div/>').text(value).html(); }

function stopImageUpload(success, filename) {
  var imageNameArray = new Array();
  var result = '';

  if (success) {
    result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';

    $('.listImage').append(htmlEncode(filename) + '<br/>');
  } else {
    result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
  }
}

然后你只需要调整最后一行imageupload.php：

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

注意：如果您启用了允许<?= ?>阻止的选项，您可以使上面的代码看起来更好：

<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?= $result ? 'true' : 'false'; ?>, <?= $_FILES['fileImage']['name'] ?>);</script>
于 2012-04-29T23:51:48.677 回答