Why i cant access second file chooser. first file chooser work well.
This is HTML part
<form action="<?php url("image/uploadImg"); ?>" method="post" enctype="multipart/form-data">
<div class="imgLine">
<div class="line">
<img id="previewImg" src="<?php echo BURL.'assets/img/addImg.svg'; ?>" alt="Placeholder">
</div>
<div class="line">
<!-- <input type="file" name="file" onchange="previewFile(this);" required> -->
<label class="addFile"> Select File
<input type="file" name="file" size="60" onchange="previewFile(this);" required>
</label>
</div>
<div class="line">
<input class="submitBtn" type="submit" name="submit" value="Save">
</div>
</div>
</form>
<form action="<?php url("image/uploadImg"); ?>" method="post" enctype="multipart/form-data">
<div class="imgLine">
<div class="line">
<img id="previewImg" src="<?php echo BURL.'assets/img/addImg.svg'; ?>" alt="Placeholder">
</div>
<div class="line">
<!-- <input type="file" name="file" onchange="previewFile(this);" required> -->
<label class="addFile"> Select File
<input type="file" name="file" size="60" onchange="previewFile(this);" required>
</label>
</div>
<div class="line">
<input class="submitBtn" type="submit" name="submit" value="Save">
</div>
</div>
This is jquery part
<script>
function previewFile(input){
//console.log(input);
var file = $("input[type=file]").get(0).files[0];
//console.log(file);
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
What I am getting is upon uploading the second file. The function call. parameter values also pass. but
var file = $("input[type=file]").get(0).files[0] this file varible does not create.Please help
Just change
<img id="previewImg"
To some classes in both form
<img class="previewImg"
Probably it's require changes in javascript code.
Change a way how you create a function. Do not run javascript function inside html code, remove it
onchange="previewFile(this);"
instead of this catch the action i.e
function previewFile() {
$('.previewImg').on('change', function() {
// use $(this) to catch clicked element only
... your code goes here
});
}
I will find some result. It works well. THankz who helps me
function previewFile(input) {
console.log(input);
var file = input.files[0];
console.log(file);
if(file){
var reader = new FileReader();
reader.onload = function(){
$(input).closest('.imgLine').find('#previewImg').attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
Related
Here, I can able to upload a file and display an uploaded file name in the info class. But, I've tried to display an uploaded image file name in the below input field image_main_file_name and I failed. Help me to resolve the same.
I can able to display uploaded image file name in info div class as below,
$(input).closest('dd').find('.info').html(fileName);
Help me to display an uploaded image file name in the input field image_main_file_name below,
function setImage(input) {
let $imgBox = $(input).closest('dd').find('.img_box');
var reader = new FileReader();
reader.onload = function(e) {
$imgBox.html($('<img>').attr('src', e.target.result));
let fileName = input.files[0].name;
$(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
$(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
$(input).closest('dd').find('.info').html(fileName);
$("#image_main_file_name").val(fileName);
};
reader.readAsDataURL(input.files[0]);
}
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
Your code was fine. You just didn't attach a change listener to the file input that calls setImage.
function setImage(input) {
let $imgBox = $(input).closest('dd').find('.img_box');
var reader = new FileReader();
reader.onload = function (e) {
$imgBox.html( $('<img>').attr('src', e.target.result) );
let fileName = input.files[0].name;
$(input).closest('dd').find(".folder_box img").attr('src',e.target.result)
$(input).closest('dd').find(".folder_box img").attr('data-file',fileName)
$(input).closest('dd').find('.info').html(fileName);
$("#image_main_file_name").val(fileName);
};
reader.readAsDataURL(input.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
For multiple:
function setImage(input) {
let $imgBox = $(input).closest('dd').find('.img_box');
var reader = new FileReader();
reader.onload = function(e) {
$imgBox.html($('<img>').attr('src', e.target.result));
let fileName = input.files[0].name;
$(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
$(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
$(input).closest('dd').find('.info').html(fileName);
$(input).parent().next().find('#image_main_file_name').first().val(fileName);
};
reader.readAsDataURL(input.files[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
<input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
<p class="folder_img"></p>
</label>
<div class="info">
<input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
set id of the control and then use below jquery syntax to set value.
<input type="text" id="image_main_file_name" name="image_main_file_name"/>
$("#image_main_file_name").val(fileName);
I want to preview 4 pictures before I upload them to my laravel app.
I can see the first preview image when I upload the first picture.
But if I upload a second picture, the first preview image changes to the second picture. But I cannot see the second picture preview in the second preview field.
The same thing happens to the third and the fourth picture. Only the first preview field changes.
How can I show 4 image previews?
html
<div class="image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../blog-image/S__3530766.jpg" id="preview">
#endif
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >
Add profile photo
</label>
</div>
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview2">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview3">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview4">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
javascript
const input = document.getElementById("file");
const previewImage = document.getElementById("image-preview__image");
input.addEventListener('change', function(e){
const file = this.files[0];
if (previewImage != null && previewImage.length < 1){
for (var i=0; i<previewImage.length; i+=1){
if(file) {
const reader = new FileReader();
reader.addEventListener("load", function(){
previewImage.setAttribute("src", this.result);
});
previewImage.style.display = "block";
reader.readAsDataURL(file);
} else {
previewImage.setAttribute("src", "");
}
}
}
}
);
In order to access the correct preview element you need a reliable way to query elements further up the DOM in this case - and because the HTML is not constant I modified your original slightly so that various distinct parts were separated using section tags - thus allowing a simple DOM traversal to find the correct preview img tag. In the following you'll note that I have omitted the template tags you were using
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Image previews</title>
</head>
<body>
<form method='post'>
<!--
slightly modified and without templating tags, otherwise essentially the same. ID attributes replaced with class attributes
-->
<section>
<div class="image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >Add profile photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo </label>
</div>
</section>
</form>
<script>
const findsection=function(n){
while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
return n;
};
Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
input.addEventListener('change',function(e){
let section=findsection( e.target );
let file=this.files[0];
let reader = new FileReader();
reader.addEventListener('load', function(){
let img=section.querySelector( 'img.image-preview__image' );
img.src=this.result;
img.width=200;
});
reader.readAsDataURL(file);
})
})
</script>
</body>
</html>
const findsection=function(n){
while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
return n;
};
Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
input.addEventListener('change',function(e){
let section=findsection( e.target );
let file=this.files[0];
let reader = new FileReader();
reader.addEventListener('load', function(){
let img=section.querySelector( 'img.image-preview__image' );
img.src=this.result;
img.width=200;
});
reader.readAsDataURL(file);
})
})
<section>
<div class="image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >Add profile photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo </label>
</div>
</section>
you have multiple IMG elements with the same id image-preview__image.
User different ID for each element then it will work.
<input type="file" id="file" accept="image/*" name="image">
further name can not be same in multiple places.
I need one help.I want to display image inside image tag when image will be selected.I am explaining my code below.
<div class="col-md-6 bannerimagefile" ng-controller="imgController">
<form name="form">
<label for="bannerimage" accesskey="B"><span class="required">*</span> Banner Image</label>
<input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<img ng-src="{{attachImage}}" border="0" name="bannerimage" style="width:70px; height:70px;">
</div>
<div><input type="button" id="btn" ng-click="submitImage();" value="Upload" /></div>
<div class="clear"></div>
</form>
</div>
My controller file is given below.
var app=angular.module('testImage',['ngFileUpload']);
app.controller('imgController',function($scope,$http){
$scope.submitImage=function(){
console.log('image',$scope.file);
}
});
Here my requirement is when user will select the image it will display inside the image tag which is given in my code using Angular.js.Please help me.
I am using following code to upload and preview image using js, when i select the image from computer , it previews the image properly , but when i try to upload the image again and click 'cancel', it removes the previously selected image , but in firefox it does not. , what might be issue with chrome?
function readURL(input) {
jQuery("#image_view1").hide();
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery("#image_view").html("<img id='image_view' src='"+ e.target.result+"' alt='your image' style='width: 240px; height: 130px; '/></br>");
};
reader.readAsDataURL(input.files[0]);
}
}
Html :
<form action="" method="post" id="frmGallery" enctype="multipart/form-data" class="mediaSliderForm">
<div class="control-group clearfix"><h2>Add Image</h2></div>
<div class="control-group clearfix"><label>Title : </label><input type="text" name="title" class="required"></div>
<div class="control-group clearfix"><label>Category : </label>
<select class="required testimonialCategory" name="category">
<option value="">Select Category</option>
<?php foreach($categories as $category){
echo $cat_id == $category->term_id ? '<option value="'.$category->term_id.'" selected="true">'.$category->name.'</option>' : '<option value="'.$category->term_id.'">'.$category->name.'</option>';
}?>
</select>
</div>
<div class="control-group clearfix"><label>Image: </label> <input type="file" name="image" id="image" class="required" onchange="readURL(this);"></div>
<div class="control-group clearfix"><label> </label><div id="image_view" class="advImg"></div></div>
<input type="submit" class="btn btn-small btn-inverse" name="submit" value="Submit">
</form>
I have a series of divs that load each has a dynamic id name based on a database result.
Within each div are several hidden input text fields that all have the same name and id.
The user clicks a href which is dynamically generated from the database launching colorbox. For example ()
On the opening div is a button. When the user clicks this button it submits a form.
As it is now it sumbits only the values of the first instance of the fields (for example Yellow, digital-world, Digital Revolution).
It is suppsoed to submit the values of the url that is active. For example, if the user clicks (">) then it should submit Blue, abstract, Abstract Panel. Instead of Yellow, digital-world, Digital Revolution.
In addition, there are scroll buttons on the colorbox so for example the user can click a next button to load the next set of values. Ie. if he is on and clicks the next button he is suddenly on so if he clicks the button on here it should submit the correct values ie. Blue, abstract, Abstract Panel.
Does this make sense?
Let me show...
<div class="doneit">
<div style="float:left;"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></div>
div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">
</div>
<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">
<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">
<button class="addtobutton addtocart" onclick="submitMyForm();"></button>
</form>
</div></div>
</div>
Thanks for any and all help!
You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.
One of the problems is exactly the one you're facing now.
As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)
To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
<div style="float:left;">
<a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
<img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Yellow" />
<input type="hidden" name="Product_Dir_1" value="digital-world" />
<input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Blue" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Red" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
<img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Purple" />
<input type="hidden" name="Product_Dir_1" value="electric-effect" />
<input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
<div id="container">
<div id="video"></div>
<div id="doesit">
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
<!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
<button class="addtobutton addtocart" type="submit"></button>
</form>
</div>
</div>
</div>
jQuery (Javascript):
// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
// Getting the inputs values. The ones within the clicked div.
// We look for the inputs which name starts with Product_...
// Let's use .prop() instead of .val() because IE sometimes doesn's like it.
var div = $(div);
var productVid = $("input[name^='Product_Vid_']", div).prop("value");
var productDir = $("input[name^='Product_Dir_']", div).prop("value");
var productName = $("input[name^='Product_Name_']", div).prop("value");
// Setting the form inputs values.
$("#Product_color_16").prop("value", productVid);
$("#Product_Dir_16").prop("value", productDir);
$("#Product_Name_16").prop("value", productName);
}
$(function () {
// When the user clicks on one of the divs.
$(".doneit").on("click", function () {
setFormValues($(this));
return true;
});
// When the user clicks the cart button, on the video window.
$(".addtocart").on("click", function() {
// Here we need a bit of native Javascript.
var videoPlaying = document.getElementById("video_video");
if (typeof videoPlaying != "undefined") {
var videoSource = videoPlaying.currentSrc;
if (typeof videoSource != "undefined") {
var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
// Check which div has an image which src
// matches the video filename.
var image = $(document).find("img[src*='" + videoSourceFilename + "']");
if (typeof image != "undefined") {
var divContainer = $(image).parent().parent().parent();
if (typeof divContainer != "undefined")
setFormValues($(divContainer));
}
}
}
return true;
});
});