图像预览通过ajax发送到php文件答案

【问题标题】：Image preview send to php file via ajax图像预览通过ajax发送到php文件
【发布时间】：2017-12-26 07:45:56
【问题描述】：

具有图像预览选项，显示所选图像的缩略图。

考虑下面的 HTML，

html：

<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage[]" />

用于在浏览器中预览图像的代码：

$(document).ready(function() {  
   if (window.File && window.FileList && window.FileReader) {
    $("#gallery").on("change", function(e) {        
        var fileName = document.getElementById("gallery").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
        //TO DO
        var files = e.target.files,
        filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {
              var file = e.target;
              $("<span class=\"imgPreview\">" +
                "<img id=\"image\" name=\"image[]\" class=\"imageThumb\" src=\"" + e.target.result + "\"/>" +
                "<span class=\"remove icon-error\" title=\"Close\"></span>" +
                "</span>").insertAfter(".gallery_section");
              $(".remove").click(function(){
                $(this).parent(".imgPreview").remove();
              });
            });
            fileReader.readAsDataURL(f);
        }           
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
        });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

使用上述 html 选择文件时，一切正常。就像我可以选择多张图片，我可以通过 ajax 上传多张图片。

ajax：

var formData = new FormData($("#room_form")[0]);

var url=$("#room_form").attr("action");

$.ajax({
    method: "POST",
    data: formData,
    url: url,
    cache: false,
    contentType: false,
    processData: false,
})
.success(function(data) {
    loaderHide();

    setTimeout(function() {
        window.location.reload();
    }, 1000);


}).
fail(function(data) {
    loaderHide();
});

以上都可以正常工作。

问题：

当我选择 3 个文件时。我在预览中显示这 3 个文件。我再次选择另外 2 个文件，现在预览显示总共 5 个文件。但在<input type="file" 中只有 2 个文件。我搜索并发现这是默认行为。

试过了： 预览图：

预览代码：

在图像源中，im 将原始图像作为 base 64 编码图像。我需要将此图像发送到 php 文件。我该怎么做？

【问题讨论】：

分享你的现场演示？或完整的代码？我找不到预览代码？
@wow 代码更新为preview code
为什么不制作现场演示，因为您在这里的 id 不同 gallery_img != gallery
@wow 没有任何实时服务器，我在虚拟主机的帮助下在本地服务器上工作
有很多像 <img id="image" name="image[]" class="imageThumb" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ 这样的图像标签，如果你告诉我如何通过 ajax 将这个 src 发送到 php 文件。那么我的问题就解决了

标签： javascript php jquery ajax laravel-5.5

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


</head>
<body>
<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage" />
<div class="gallery_section">
</body>
<script>
$(document).on('change','#gallery_img',function(evt){            
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

              // Only process image files.
              if (!f.type.match('image.*')) {
                return;
              }

              var reader = new FileReader();

              // Closure to capture the file information.
              reader.onload = (function(theFile) {
                return function(e) {
                  // Render thumbnail.
$('.gallery_section').append('<span class="imgPreview"><img id="image" name="image[]" class="imageThumb" src="'+e.target.result+'"><span class="remove icon-error" title="Close"></span></span>');
                };
              })(f);
              // Read in the image file as a data URL.
              reader.readAsDataURL(f);
            }           
          });
</script>
</html>

【讨论】：