Question

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

<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张图像。我该怎么办？

Answer 1

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

var form_data = new FormData(); form_data.append("image", file);，其中file包含使用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']在后端检索这些图像。

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

1 个答案: