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

以下は、上記のjavascript関数から別のページにあるファイルをアップロードするphpスクリプト（imageupload.php）です。

<?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 に答える