Question

我正在尝试使用PHP和javascript在同一页面上传图像文件。我在PHP中嵌入了javascript代码，以在html标记内显示一些消息和图像。以下是我的代码，请指出我做错了什么并得到纠正。任何帮助，将不胜感激。感谢..

ImageUpload.php

if( isset($_POST['submit']) ) { 

$fileName = $_FILES['file']['name'];  
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];

$maxFileSize = 200000;

$fileExt = explode(".", $fileName);
$currFileExt = strtolower(end($fileExt));

$allowed = array('jpg', 'jpeg', 'png', 'gif');

if(in_array($currFileExt, $allowed) ){

    if($fileSize < $maxFileSize) {
        if($fileError == 0){

            $uniqueFileName = uniqid('',true).".".$currFileExt;

            move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);

            ?>
                <script type="text/javascript">
                    document.getElementById('image').setAttribute("src",<?= 'uploads/'.$uniqueFileName; ?>);
                </script>
            <?php

        } else {
            ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "There is an error in uploading file";
            </script>
            <?php
        }

    } else {

        ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "fileSize should be atmost 500kb";
            </script>
        <?php
    }


} else {
    ?>
        <script type="text/javascript">
            document.getElementById('imageHolder').innerHTML = "This type of file is not allowed";
        </script>
    <?php
}

}   
 ?>

<!DOCTYPE>
<html lang="en">

<body>

    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" 
     method="post"   enctype="multipart/form-data" id="form" >
      <input type="file" name="file" id="file" />
      <input type="submit" value="Upload Image" name="submit" id="submit" />
    </form>

    <p ><h2>Upload image here</h2></p>

    <div id="imageHolder" style="height:200px;max-height:200px;max-
    width:200px;width:200px;border:1px solid black;">
      <img src="" id="image" style="height: 200px;width: 200px;"/>

    </div>

</body>
</html>

Answer 1

要解决您的问题，请参阅@u_mulder回答，但在此状态下使用javascript是不错的方式，我建议您更改此代码

<?php
$error = ''; // add $error to hold error text
$image_url = ''; // add $image_url to hold image url
if( isset($_POST['submit']) ) { 
    $fileName = $_FILES['file']['name'];  
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $maxFileSize = 200000;
    $fileExt = explode(".", $fileName);
    $currFileExt = strtolower(end($fileExt));
    $allowed = array('jpg', 'jpeg', 'png', 'gif');
    if(in_array($currFileExt, $allowed) ){
        if($fileSize < $maxFileSize) {
            if($fileError == 0){
                $uniqueFileName = uniqid('',true).".".$currFileExt;
                move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);
                //this part updated
                $image_url = 'uploads/'.$uniqueFileName;
            } else {
                // this part updated
                $error = 'There is an error in uploading file'; 
            }
        } else {    
                // this part updated
                $error = "fileSize should be atmost 500kb";
        }
    } else {
        // this part updated
        $error = "This type of file is not allowed";
    }
}
 ?>
<!DOCTYPE>
<html lang="en">
<body>
    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" 
     method="post"   enctype="multipart/form-data" id="form" >
      <input type="file" name="file" id="file" />
      <input type="submit" value="Upload Image" name="submit" id="submit" />
    </form>

    <p ><h2>Upload image here</h2></p>

    <div id="imageHolder" style="height:200px;max-height:200px;max-
    width:200px;width:200px;border:1px solid black;">
    <?php
        //this part updated
        if($error):
            ?>
         <p><?php echo $error; ?></p>
    <?php
        endif;?>
    <?php
        if($image_url): ?>
            <img src="<?php echo $image_url; ?>" id="image" style="height: 200px;width: 200px;"/>
    <?php
        endif; ?>
    </div>
</body>
</html>

Answer 2

您的问题是，在页面上显示所需的html元素之前，您的javascript代码运行。所以，当你尝试使用

获取元素时

document.getElementById('imageHolder')

虽然这个元素没有被重新搜索，但javascript什么也没找到并返回null。

因此，在输出所需元素后，您需要输出的javascript代码。

你可以这样做：

<!DOCTYPE> <html lang="en"> <body> <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post" enctype="multipart/form-data" id="form"> <input type="file" name="file" id="file" /> <input type="submit" value="Upload Image" name="submit" id="submit" /> </form> <p ><h2>Upload image here</h2></p> <div id="imageHolder" style="height:200px;max-height:200px;max- width:200px;width:200px;border:1px solid black;"> <img src="" id="image" style="height: 200px;width: 200px;"/> </div> <?php if( isset($_POST['submit']) ) { $fileName = $_FILES['file']['name']; $fileTmpName = $_FILES['file']['tmp_name']; $fileSize = $_FILES['file']['size']; $fileError = $_FILES['file']['error']; $maxFileSize = 200000; $fileExt = explode(".", $fileName); $currFileExt = strtolower(end($fileExt)); $allowed = array('jpg', 'jpeg', 'png', 'gif'); if(in_array($currFileExt, $allowed) ){ if($fileSize < $maxFileSize) { if($fileError == 0){ $uniqueFileName = uniqid('',true).".".$currFileExt; move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);?> <script type="text/javascript"> document.getElementById('image').setAttribute("src",<?= 'uploads/'.$uniqueFileName; ?>); </script> <?php } else {?> <script type="text/javascript"> document.getElementById('imageHolder').innerHTML = "There is an error in uploading file"; </script> <?php } } else {?> <script type="text/javascript"> document.getElementById('imageHolder').innerHTML = "fileSize should be atmost 500kb"; </script> <?php } } else {?> <script type="text/javascript"> document.getElementById('imageHolder').innerHTML = "This type of file is not allowed"; </script> <?php } }?> </body> </html>

在这种情况下，html元素已经在DOM中，javascript可以找到它们。

另一个选项可以是jquery与document.ready（或纯js-analog load函数，afair），在这种情况下，您可以将js-code放在您想要的位置。 / p>

Answer 3

<table width="80%" border="0">
<tr>
<th onmousedown="fileUpload_upd(document.getElementById('myform_upd'),'upload_upd.php?path=img/my_image.jpg','upload1'); return false;">

Send   
</th>
</tr>
</table>

和文件upload_upd.php：

  $img_ath=$_GET["path"];
  $upl=move_uploaded_file($_FILES["datafile_upd"]["tmp_name"],$img_ath);

＆GT;

和javascript文件中的fileUpload_upd：

  function fileUpload_upd(form, action_url, div_id) {

 var iframe = document.createElement("iframe");
iframe.setAttribute("id", "upload_iframe");
iframe.setAttribute("name", "upload_iframe");
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("border", "0");
iframe.setAttribute("style", "width: 0; height: 0; border: none;");

// Add to document...
form.parentNode.appendChild(iframe);
window.frames['upload_iframe'].name = "upload_iframe";

iframeId = document.getElementById("upload_iframe");

// Add event...
var eventHandler = function () {

        if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
        else iframeId.removeEventListener("load", eventHandler, false);

        // Message from server...
        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        document.getElementById(div_id).innerHTML = content;

        // Del the iframe...
        setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
    }

if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

// Set properties of form...
form.setAttribute("target", "upload_iframe");
form.setAttribute("action", action_url);
form.setAttribute("method", "post");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("encoding", "multipart/form-data");

// Submit the form...
form.submit();

document.getElementById(div_id).innerHTML = "</br></br></br><img       src=src/img/loadingsmall.gif></br></br></br>";
    }

Answer 4

您好我已经更改了您的代码。我把你的HTML部分放在脚本

之前

<script type="text/javascript">
                    document.getElementById('image').setAttribute("src",<?= 'uploads/'.$uniqueFileName; ?>);
                </script>

我改变了你的代码

<script type="text/javascript">
                    document.getElementById('image').setAttribute("src","<?php echo 'uploads/'.$uniqueFileName;  ?>");
                </script>

到这个

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vueboze</title>
  </head>
  <body>

  <input type="text" name="input">

<script src="https://unpkg.com/vue@2.4.2"></script>

    <div id="app"></div>
    <script src="/dist/build.js"></script>

  </body>


  <script>

    let data = {
        message: 'Hello World'
    };

    document.querySelector('#input').value = data.message;  

</script>

</html>

现在，我没有像你提到的那样在控制台中收到任何错误。请尝试代码

在同一页面上上传图像文件

4 个答案: