javascript - File to upload and show on div multiple -
i have function created select image input type="file" , show uploaded file on div problem there multiple input file 3 input file tied alot issue facing 1 image showing , other 2 not showing.
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>
to fix issue change id's of image fields value because in-conflict id's of file input.
general rule : cannot have elements same id in dom
function head(input) { if (input.files && input.files[0]) { var reader = new filereader(); reader.onload = function(e) { $('#head_shot-img').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-img').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-img').attr('src', e.target.result); } reader3.readasdataurl(input.files[0]); } } $("#full").change(function() { full(this); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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-img" src="#" alt="your image" /> </div> </div> <div class="col-sm-4"> <div class="img-box"> <h4>side profile</h4> <img id="side_profile-img" src="#" alt="your image" /> </div> </div> <div class="col-sm-4"> <div class="img-box"> <h4>full length</h4> <img id="full-img" 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>this suggestion
i using jquery multifile without problem.
- the plugin allows upload single file or multiple files. every batch of uploads grouped , assigned close button can remove specific files.
- the next nice feature preview of images.
Comments
Post a Comment