如何将一个文件输入分配给另一个文件输入？

Question

我知道奇怪的问题。这里的主要问题是我正在使用一个名为cropit的很酷的工具。在这种情况下，我们上传一张图像，进行预览，然后根据需要进行处理。

HTML：

<div align="center" id="image-cropper1">

    <!-- This is where user selects new image -->
  <label class="btn btn-success btn-file">Upload Photo<input type="file" class="cropit-image-input"/></label><br><br>

  <!-- This is where the preview image is displayed -->
  <label><div class="cropit-preview"><img class="prepic" src="preloadimage.jpg"></label>

<!-- Here I process the image -->
<button type="button" id="image1pick" class="btn btn-primary" data-dismiss="modal" disabled>OK</button></div>

jQuery的：

$('#image-cropper1').cropit();

$('#image-cropper1').change(function() {
    $('#image1pick').prop('disabled', false);
    });

$('#image1pick').click(function() {
    imageData1 = $('#image-cropper1').cropit('export', {originalSize: true});
    $.post('somephp.php', { imageData1: imageData1 }, function() { $('#image1pick').data('clicked', true) })
    });

现在，我想要实现的是添加另一个<input type="file"/>按钮，一次可以上传6张图片，并在6个不同的".cropit-preview"div 上获取它们。这很重要，因为用户可以在预览中缩放和旋转图像。在这种给定的工具结构中，是否可以获取多个文件并将其添加到每个预览div中？

编辑：

请查看文档：http : //scottcheng.github.io/cropit/ 问题是结构。假设我有三种不同的农作物。结构如下所示：

jQuery的：

$('#image-cropper1').cropit();
$('#image-cropper2').cropit();
$('#image-cropper3').cropit();

HTML：

<!-- Cropper No 1 -->
<div id="image-cropper1">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>

<!-- Cropper No 2 -->
<div id="image-cropper2">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>

<!-- Cropper No 3 -->
<div id="image-cropper3">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>

如您在这里看到的，每个文件输入和预览div都位于编号div内，并且我已将其耦合。但是现在我想要一个输入，可以同时上传三个图像，并适合每个编号div中的每个图像预览。我该如何实现？

Answer 1

要将文件选择从一个输入复制到另一个输入，您可以执行以下操作：

var file1 = document.querySelector('#image-cropper1>input[type=file]');
var file2 = document.querySelector('#image-cropper2>input[type=file]');
file2.files = file1.files;

对于<input type="file">元素，files属性指向一个FileList对象，描述为here。