表单将图像传递给PHP

时间:2019-11-29 10:17:16

标签: php html

我想将图像传递到另一个页面并使用 PHP 显示。

index.html

<form method="POST" action="img.php">
    <img id="img" alt="image" width="100" height="100" />
    <input type="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">
    <input type="submit" name="">
</form>

image.php

<?php
   $level =$_POST['img'];
   echo "$level asd";
?>

1 个答案:

答案 0 :(得分:1)

请检查一下。这个对我有用。 我只是在输入类型中添加了一个name属性,并通过post方法传递了它,别忘了将index.html重命名为index.php

仅单个上传:

index.php

 <form method="POST" action="img.php">
        <img id="img" alt="image" width="100" height="100" />
    <input type="file" name="img_url" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">
    <input type="submit" name="">

img.php

<?php 
echo $_POST['img_url'];

?>

多次更新:

index.php

<form id="dynamicForm" method="POST" action="img.php">
    <b>This single img works but not in js</b> <br>
    <img id="img" alt="your image" width="100" height="100" />
    <input type="file" name="single_img" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">

    <br/>
    No of Img <input type="text" id="noi" value="" onkeyup="addFields()">
        <br />

     <div id="dynamicField"></div>
<input type="submit" name="">

<script> 


    function addFields(){
        // Number of inputs to create
        var number = document.getElementById("noi").value;
        // Container <div> where dynamic content will be placed
        var container = document.getElementById("dynamicField");
        var array = ["CRICTICAL","HIGH","LOW","INFO"];
        // Clear previous contents of the container
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }


        for (i=1;i<=number;i++){

            var img = document.createElement("img");
            img.width="100";
            img.height="100";
            img.id="img "+i;

            var upload = document.createElement("input");
            upload.type="file";
            upload.name="file_"+i;
            upload.id="upload "+i;
            //Working_______________
            upload.onchange=upload.onchange= function () {

                var img_id=this.getAttribute('id');
                var imgId = img_id.charAt(7) ; 
                document.getElementById("img "+imgId).src = window.URL.createObjectURL(this.files[0])
            }

            //________________________________________
            container.appendChild(img);
            container.appendChild(upload);
            container.appendChild(document.createElement("br"));
        }
    } 
</script>

img.php

<?php 

$result =  $_POST;
$mul =  count($result);
if($mul>0){
    foreach ($result as $key => $value) {
        echo $value."<br>";
    }
}

?>