[英]How to assign a file input to another file input?
奇怪的问题，我知道。 这里的主要问题是我使用了一个很酷的工具，叫做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>
查询：
$('#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/ 问题是结构。 假设我有三种不同的作物。 结构如下所示：
查询：
$('#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 中的每个图像预览。 我怎样才能做到这一点？
要将文件选择从一个输入复制到另一个，您可以执行以下操作：
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对象，如下所述。
我会做这样的事情：
//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>
尝试这个：
$("#destinationFileInput").prop("files",$("#sourceFileInput").prop("files"));
只需将源输入标记文件分配给另一个，如下所示：
如果我有两个输入标签： source和target 。
<input id="source" type="file" name="file" accept=".jpg,.jpeg,.png" multiple="multiple" aspect="1" >
<input id="target" type="file" name="file" accept=".jpg,.jpeg,.png" multiple="multiple" aspect="1" >
let source = document.getElementById("source");
let target = document.getElementById("target");
source.files = target.files;
感谢Ourobonus的提示。
如果您只想显示图像的缩略图，可以参考https://developer.mozilla.org/en-US/docs/web/api/file_api/using_files_from_web_applications 。
将多个图像（文件）从一个文件输入分配到另一个文件输入 - 上传
[英]Assign multiple images (files) from one file input to another file input(s) - upload
如何使用javascript将输入文件的数据传递到另一个file.php
[英]how to pass the data of input file to the another file.php with javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.