Question

我已经尝试了很多次来解决这个问题，但我无法解决它。我也在谷歌搜索这个，但不幸的是，代码没有运行，这是我在google上搜索的示例代码。

<div id='preview'></div>
    <form id="imageform" method="post" enctype="multipart/form-data" action='index.php'>
    <input type="file" name="photoimg" id="photoimg" />

     </form>


<script type ="text/javascript">
$('#photoimg').on('change', function() 
 {
      $("#imageform").ajaxForm({target: '#preview', //Shows the response image in the div named preview 
         success:function(){

         }, 
         error:function(){

          } 
       }).submit();
});

</script>   

<?php    
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
$tmp = $_FILES['photoimg']['tmp_name'];
$path = "uploads/";
move_uploaded_file($tmp, $path.$name); //Stores the image in the uploads folder
}

?>

Answer 1

我的表单实际上有这个功能。

Javascript：

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnail");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

代码：

<input name="file[]" id="file[]" type="file" onchange="showMyImage(this)" required>
<div class="img">
<img id="thumbnail" style="max-width:120px;max-height:120px;"  src="" alt="No main image inputted"/>
</div>

Javascript或Php中的自动预览图像

1 个答案: