时间戳

首页 > 解决方案 > 如何使用相同的输入按钮附加多个图像

javascript - 如何使用相同的输入按钮附加多个图像

问题描述

我的表单上有图片上传按钮。目前它正在使用带有图像预览的上传单个文件。

<h3>Upload  images</h3>
<input type="file" id="files" name="files[]" multiple />

jQuery

<script >
  $(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
      $("#files").on("change", function(e) {
        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=\"pip\">" +
                "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                "<br/><span class=\"remove\">Remove image</span>" +
                "</span>").insertAfter("#files");

              $(".remove").click(function(){
                $(this).parent(".pip").remove();
              });
            });

          fileReader.readAsDataURL(f);
        }
      });
    } else {
      alert("Your browser doesn't support to File API")
    }
  });
</script>

现在我需要使用相同的按钮上传最多 4 张图片。我怎样才能做到这一点？

标签： javascriptjquerycss

解决方案

您可以将表单设置enctype为multipart/form-data并将输入字段设置为multiple。之后，您可以使用FormDataJavascript 中可用的对象。初始化 Form Data 对象后，您可以使用 for 循环将所有图像附加到 form_data 对象。

var form_data = new FormData(); form_data.append("image", file);wherefile包含使用获取的文件document.getElementById('id-of-upload-element').files;

代码：

<!DOCTYPE html>
    <head>
        <title>Example</title>
    </head>

    <body>
        <form enctype="multipart/form-data" id="add-hotel-form">
            <div class="form-group col-md-12">
                <label for="hotel">Upload Hotel Images</label>
                <input type="file" class="form-control-file" id="upload_hotel_img1" name="img_url" multiple>
            </div>

            <input type="button" class="btn btn-primary" name="submit" value="Submit" onclick="myfunction();">
        </form>
    </body>

    <script>
    function myfunction(){

        var form_data = new FormData();

        var image = document.getElementById('upload_hotel_img1').files.length;


        for (var x = 0; x < image; x++) {
            form_data.append("image", document.getElementById('upload_hotel_img1').files[x]);
        }
    }
    </script>
</html>

我们可以分别使用以下命令在后端检索这些图像：$_FILES["image"]['name']和$_FILES["images"]['name']。

推荐阅读