アップロードIMG（<image>をクリックして、ではないの<input type =ファイル>）、<img>を次のように表示、クライアント側は、

Question

目標サイズを変更：（そこに意志<img>代わりの<input type="file">をクリックすることで

アップロード画像を3つのアップロードとなるので、ページの読み込みに3人のプレースホルダがあり、プレースホルダをクリックするとファイルが選択され、このファイルはそれぞれのプレースホルダに表示されます）。私は今持っているもの：

HTML：

<div class="image-upload"> 
    <label for="file_input1"> 
     <img id="send_photo_img1" src="assets/images/index2.png"/> 
    </label> 
    <input id="file_input1" type="file"/> 
</div> 

CSS：

.image-upload > input 
{ 
    display: none; 
} 

.image-upload img 
{ 
    display: inline-block; 
    margin-right:6px; 
    width: 90px; 
    height: 90px; 
    cursor: pointer; 
} 

のjQuery： SCRながら

function readURL(input) { 

if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#send_photo_img1') 
      .attr('src', e.target.result); 
    } 

    reader.readAsDataURL(input.files[0]); 
} 
}  

$("#send_photo_img1").change(function(){ 
    readURL("#file_input1"); 
}); 

plupload.jsやdropzone.jsのようなiptsもそうですが、実際には必要ないものもたくさんあります（つまり、私の必要性にはあまり合わないUIやコードオプションがたくさんありますが、スペースは必要です）、現在のニーズに必要な範囲でこれを実装しようとしています。

現在のコードでは、目的の画像のみを選択できますが、表示することはできません。現在、イメージが選択されると、いつでもローディングサインが表示されますが、その後は何も起こりません。 Chrome F12でもエラー出力はありません。

Answer 1

はそれを考え出した、非常straighforwardようになって：あなたが好きなように

<div class="img_upload"> 
    <img class="send_photo_img" id="send_photo1_img" src="assets/images/index2.png"/> 
    <input id="send_photo1" name="send_photo1" class="send_photo_input" type="file"/> 
</div> 
<div class="img_upload"> 
    <img class="send_photo_img" id="send_photo2_img" src="assets/images/index2.png"/> 
    <input name="send_photo2" class="send_photo_input" type="file"/> 
</div> 

HTMLは、できるだけ多くのimgを持っています。さらに上の

、それは<image>のクリックをキャッチしたら、CSSであなたは、JS経由<input>上<input>とトリガクリックし、その上を隠す：

CSS

.img_upload input 
{ 
    display: none; 
} 

JS（トリガしますクリック）

$(".img_upload img").click(function(){ 
     img = $(this); 
     input = img.next(".send_photo_input"); 
     var newUrl; 

     input.trigger("click"); 
     input.change(function(){ 
      newUrl = resize_and_draw(this, img.width()); 
      url.push(newUrl); 
    }); 
}); 

最後に、HTML5キャンバスで残りのことをやっています（現在、Opera Mini（2017年10月初め現在の世界シェア2,81％）を除く）ほとんどのものでサポートされています。

あなたがそう以下、（帯域幅を維持するなど、負荷の速度を低下させる）、またクライアントで画像のサイズを変更するために興味がある可能性があり、完全なコードである：

関数resize_and_draw（入力、targetH）{

if (input.files && input.files[0] && /\.(jpe?g|png|gif)$/i.test(input.files[0].name)) { 

    var reader = new FileReader(); 
    reader.onload = function (e) { 

     var img = new Image(); 
     img.src = reader.result; 
     img.onload = function() { 

      canvas = document.createElement('canvas'); 
      canvas.width = img.naturalWidth; 
      canvas.height = img.naturalHeight; 
      context = canvas.getContext('2d'); 
      context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); 

       targetHeight = targetH; 
      targetWidth = img.naturalWidth * targetHeight/img.naturalHeight; 

      //resize 
      resample_hermite(canvas, img.naturalWidth, img.naturalHeight, targetWidth*2, targetHeight*2); 
      url = canvas.toDataURL("image/png"); 
      $(input).prev(".send_photo_img").attr('src', url); 

     }  
    } 

    reader.readAsDataURL(input.files[0]); 

    return url; 
} 
} 

これはあなたの目標に役立つことを願っています。乾杯！