如何使用php获取图像并在同一页面上显示

如何使用php获取图像并在同一页面上显示,php,Php,这是myphotos.html文件 我想从这个图像路径,我想在同一页上显示它我知道我会像photos.php一样保存它,但我怎么能在同一页上做,请帮助我 <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <strong>Upload Files</strong> <sm

这是myphotos.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>

我将非常感谢您,谢谢。

您应该参考以下链接:

示例:

HTML代码:

Javascript代码:


如果我理解正确,一旦你上传你的图像,你希望你的图像在提交之前显示在表单上。对吗?提交后没有兄弟我想在同一页上显示我已经做了,图像正在存储和显示,但我想像图像滑块一样显示
<input id="imageupload" type="file" multiple />
<div id="preview-image"></div>
<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>