文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将文件输入分配给另一个文件输入？

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

Stack Overflow用户

提问于 2017-01-17 22:52:17

回答 4查看 12.1K关注 0票数 8

奇怪的问题，我知道。这里的主要问题是我正在使用一个名为沟坑的很酷的工具。在这里，我们上传一个图片，得到一个预览，以及它的过程，无论我们想要。

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中的每个图像预览。我怎样才能做到这一点？

crop

javascript

jquery

html

css

回答 4

Stack Overflow用户

发布于 2017-01-17 23:41:18

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

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对象，描述了这里。

票数 8

Stack Overflow用户

发布于 2020-07-20 11:44:16

试试这个：

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

票数 3

Stack Overflow用户

发布于 2017-01-24 06:12:40

我会这样做：

//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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41708472

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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