如何獲取圖像，並使用PHP

Question

這是我photos.html文件

我想從這個圖像路徑同一頁面上展示，我想表明它，我知道我會救它像photos.php但如何在同一頁上我可以在同一頁面上做，請幫助我。

<div class="container"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <strong>Upload Files</strong> 
     <small>upload any file</small> 
    </div> 
    <div class="panel-body"> 
     <!-- Standar Form --> 
     <h4>Select files from your computer</h4> 
     <form action="" method="post" enctype="multipart/form-data" id="js-upload-form"> 
      <div class="form-inline"> 
       <div class="form-group"> 
        <input type="file" name="files[]" id="js-upload-files" multiple> 
       </div> 
       <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">Upload files</button> 
      </div> 
     </form> 
    </div> 
</div> 

我會非常心存感激你，謝謝。

Answer 1

您應該參考以下鏈接：

Multiple image upload preview before image uploading to the server using Jquery

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

樣本實施例：

HTML代碼：

<input id="imageupload" type="file" multiple /> 
<div id="preview-image"></div> 

Javascript代碼：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<script type="text/javascript"> 
    $("#imageupload").on('change', function() { 

    var countFiles = $(this)[0].files.length; 

    var imgPath = $(this)[0].value; 
    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); 
    var image_holder = $("#preview-image"); 
image_holder.empty(); 

    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { 
     if (typeof (FileReader) != "undefined") { 

     for (var i = 0; i < countFiles; i++) { 

      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $("<img />", { 
        "src": e.target.result, 
         "class": "thumbimage" 
       }).appendTo(image_holder); 
      } 

      image_holder.show(); 
      reader.readAsDataURL($(this)[0].files[i]); 
      } 

     } else { 
     alert("It doesn't supports"); 
     } 
    } else { 
     alert("Select Only images"); 
    } 
}); 
</script>