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

【问题标题】：How to assign a file input to another file input?如何将文件输入分配给另一个文件输入？
【发布时间】：2017-06-02 04:26:55
【问题描述】：

奇怪的问题，我知道。这里的主要问题是我使用了一个很酷的工具，叫做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 内，并且 i 耦合。但现在我想要一个输入，它同时上传三张图像，并适合每个编号 div 中的每个图像预览。我怎样才能做到这一点？

【问题讨论】：

使用 jQuery 添加输入。问题是什么？
你的问题不清楚。您是否只需要一个允许多次上传的input 元素？
如果你想知道的话，你必须在元素存在后附加事件。
我会在一秒钟内更具体地编辑问题
@PHPglue 也许你对附加事件是正确的。你能展示一下它是怎么做的吗？

标签： javascript jquery html css crop

【解决方案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。

【讨论】：

此代码在 mozilla 浏览器中无效。请看stackoverflow.com/questions/46440430/…

【解决方案2】：

我会这样做：

//external.js
var doc, C;
$(function(){
  doc = document;
  C = function(tag){
    return doc.createElement(tag);
  }
  $('#upload').change(function(ev){
    var out = $('#output'), fs = this.files, fl = fs.length;
    if(fl > 6){
      console.log('Too many files');
    }
    else{
      var dv = C('div');
      $.each(fs, function(i, v){
        var fr = new FileReader, ig = C('img'), cv = C('canvas'), z = cv.getContext('2d');
        fr.onload = function(ev){
          ig.onload = function(){
            cv.width = this.width; cv.height = this.height; z = cv.getContext('2d'); z.drawImage(this, 0, 0); dv.append(cv);
          }
          ig.src = ev.target.result;
        }
        fr.readAsDataURL(v);
      });
      out.append(dv);
    }
  });
  $('#send').click(function(){
    var fd = new FormData;
    $('canvas').each(function(i, e){
      e.toBlob(function(b){
        var bf = new FileReader;
        bf.onloadend = function(){
          fd.append('image_'+i, bf.result); fd.append('count', i+1);
        }
        bf.readAsArrayBuffer(b);
      });
    });
    /*
    $.post('yourPage.php', fd, function(response){
      response comes back here
      
        test on PHP on a separate PHP page yourPage.php
        <?php
        if(isset($_POST['image_0'], $_POST['count'])){     
          for($i=0,$c=$_POST['count']; $i<$c; $i++){
            $ig = 'image_'.$i;
            if(isset($_POST[$ig])){
              file_put_contents("resricted/$ig.png", $_POST[$ig]);
            }
          }
        }
        ?>
        
    });
    */
  });
});

/* external.css */
html,body{
  margin:0; padding:0;
}
.main{
  width:980px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <form>
      <input type='file' multiple='multiple' id='upload' />
      <input type='button' id='send' value='Send to Server' />
    </form>
    <div id='output'></div>
  </div>
</body>
</html>

【讨论】：

但是如果你有多个 #output div 并且每个都在它自己的 div #number1、#number2、#number3 等里面呢？

【解决方案3】：

试试这个：

$("#destinationFileInput").prop("files",$("#sourceFileInput").prop("files"));

【讨论】：

太棒了，谢谢！这正是我一直在寻找的......