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

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

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

1 个答案: