1
入力タイプ= "file"から画像を選択してアップロードしたファイルをdivに表示する機能がありますが、問題は3つのように複数の入力ファイルが存在することです入力ファイル私はたくさん縛られていましたが、私が直面している問題は1画像しか表示されておらず、2画像は表示されていません。divにアップロードして表示するファイル
function head(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#head_shot').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#head").change(function() {
head(this);
});
function side_profile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#side_profile').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#side_profile").change(function() {
side_profile(this);
});
function full(input) {
if (input.files && input.files[0]) {
var reader3 = new FileReader();
reader3.onload = function(e) {
$('#full').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#full").change(function() {
full(this);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-sec">
<div class="container">
<div class="col-sm-4">
<div class="img-box">
<h4>head shot</h4>
<img id="head_shot" src="#" alt="your image" />
</div>
</div>
<div class="col-sm-4">
<div class="img-box">
<h4>Side Profile</h4>
<img id="side_profile" src="#" alt="your image" />
</div>
</div>
<div class="col-sm-4">
<div class="img-box">
<h4>Full Length</h4>
<img id="full" src="#" alt="your image" />
</div>
</div>
</div>
</div>
<div class="picture_sec">
<div class="container">
<div class="lb-put">
<label>Head Shot</label>
<input type="file" class="form-control" name="head" id="head">
</div>
<div class="lb-put">
<label>Side Profile</label>
<input type="file" class="form-control" name="side_profile" id="side_profile">
</div>
<div class="lb-put">
<label>Full Length</label>
<input type="file" class="form-control" name="full" id="full">
</div>
</div>
</div>
私が試したが、私のシナリオでは、3種類のファイルがアップロードされるように、私のために働いていませんでしたそれは複数ではありませんし、画像のプレビューのための主な理由であり、ライブラリのconfliclationのために私はより多くのlibを使用する必要がありません –
は3つのファイルを同時にアップロードしていますか？ – Sherlock
はい私のスニペットコードを実行して、同じことが起こっているのは同じですが、フルボディ画像のような異なるフィールドの画像やその他の入力フィールドを持つ画像は3つだけです。理解する方法はありません –