Question

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

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

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

如果我上传了另一个文件（不是刷新页面），例如monkey.png，那么它会再次附加panda.png。没有monkey.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>

Answer 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>

如何附加刚刚上传的文件的名称？

1 个答案: