Comment affecter une entrée de fichier à une autre entrée de fichier?

Question

Question étrange, je sais. Le problème principal ici est que j'utilise un outil cool appelé cropit. Dans ce cas, nous téléchargeons une image, obtenons un aperçu, et le processus que nous voulons.

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) }) 
    }); 

Maintenant, ce que je veux obtenir est d'ajouter un autre bouton <input type="file"/> qui télécharge 6 images à la fois et de les obtenir sur 6 différents ".cropit-preview" divs. C'est essentiel, puisque l'utilisateur peut zoomer et faire pivoter l'image dans l'aperçu. Existe-t-il un moyen d'obtenir plusieurs fichiers et de les ajouter dans chaque div de prévisualisation dans cette structure d'outil donnée?

EDIT:

S'il vous plaît regarder la doc: http://scottcheng.github.io/cropit/ Le problème est la structure. Disons que j'ai trois différents cultivateurs. La structure ressemblerait à ceci:

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> 

Comme vous le voyez ici chaque div d'entrée de fichier et l'aperçu est à l'intérieur du div numérotée et i accouplé. Mais maintenant je veux avoir une entrée, qui télécharge trois images en même temps et s'adapte à chaque image-aperçu dans chaque div numéroté. Comment puis-je atteindre cet objectif?

Answer 1

Pour copier la sélection de fichiers d'une entrée à l'autre, vous pouvez faire quelque chose comme:

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

Pour <input type="file"> éléments, les files points d'attributs à un objet FileList, décrit here.

Answer 2

je ferais quelque chose comme ceci:

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