自动预览图像的Javascript或Php

Question

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

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