Develop Reference

JavaScript : onchange function causes error/ didn't work

The Following code will add File upload and preview field.
<b>This single img works but not in js</b> <br>
<img id="img" alt="your image" width="100" height="100" />
<input type="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">
<br/>
No of Img <input type="text" id="noi" name="noi" value="" onkeyup="addFields()">
<br />
<script>
function addFields(){
// Number of inputs to create
var number = document.getElementById("noi").value;
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
var array = ["CRICTICAL","HIGH","LOW","INFO"];
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=1;i<=number;i++){
var img = document.createElement("img");
img.width="100";
img.height="100";
img.id="img "+i;
var upload = document.createElement("input");
upload.type="file";
//This part is Not Working_______________
upload.onchange="document.getElementById(img.id).src = window.URL.createObjectURL(this.files[0])";
//________________________________________
container.appendChild(img);
container.appendChild(upload);
container.appendChild(document.createElement("br"));
}
}
</script>
<div id="container"/>
Problem :
Without the Container appendChild function the code works fine, you can see it in the first three lines of code.

You have to run a function inside upload.onchange. Something like this:
upload.onchange= function () {
document.getElementById(img.id).src = window.URL.createObjectURL(this.files[0])
}
Other way to do:
upload.addEventListener('change', function () {
document.getElementById(img.id).src =
window.URL.createObjectURL(this.files[0])
})

Problem Solved
Working Fine.
All image fields can able to preform upload and preview function of 'n' fields.
<b>This single img works but not in js</b> <br>
<img id="img" alt="your image" width="100" height="100" />
<input type="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">
<br/>
No of Img <input type="text" id="noi" name="noi" value="" onkeyup="addFields()">
<br />
<script>
function addFields(){
// Number of inputs to create
var number = document.getElementById("noi").value;
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
var array = ["CRICTICAL","HIGH","LOW","INFO"];
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=1;i<=number;i++){
var img = document.createElement("img");
img.width="100";
img.height="100";
img.id="img "+i;
var upload = document.createElement("input");
upload.type="file";
upload.id="upload "+i;
//Working_______________
upload.onchange=upload.onchange= function () {
var img_id=this.getAttribute('id');
var imgId = img_id.charAt(7) ;
document.getElementById("img "+imgId).src = window.URL.createObjectURL(this.files[0])
}
//________________________________________
container.appendChild(img);
container.appendChild(upload);
container.appendChild(document.createElement("br"));
}
}
</script>
<div id="container"/>

JQuery: Create image and div and then append image to div

I want to create an image object, then a div object, append the image to the div and finally append the result to a wrapper.
I did this:
var image = $(document.createElement('img'));
image.attr('src', url);
image.attr('id', 'preview_gallery_image_' + i);
image.addClass('admin-hotel-gallery-image');
var imageDiv = $(document.createElement('div'));
imageDiv.addClass('col-sm-3');
imageDiv.attr('id', 'preview_gallery_image_wrapper_' + i);
var imageNode = image.appendTo(imageDiv);
var finalElement = imageNode.appendTo("#gallery-wrapper");
To make it a bit clearer, the final result should look like this:
<div id="gallery-wrapper>
<div class="col-sm-3" id="preview-gallery-image-wrapper-1">
<img url="...">
</div>
</div>
What I get is only the image in the gallery wrapper, but the inner imageDiv around the image is missing:
<div id="gallery-wrapper>
<img url="...">
</div>
What am I doing wrong?

DEMO LINK
js code
var url = 'url';
var i =1 ;
var image = $('<img />', {
id:'preview_gallery_image_' + i,
class: 'admin-hotel-gallery-image' ,
src: url
});
var imageDiv = $('<div >',{
id: 'preview_gallery_image_wrapper_' + i
});
image.appendTo(imageDiv);
var finalElement = $('<div/>',{
id: 'gallery-wrapper'
});
imageDiv.appendTo(finalElement);
finalElement.appendTo('body');
result:
<div id="gallery-wrapper">
<div id="preview_gallery_image_wrapper_1">
<img src="url" class="admin-hotel-gallery-image" id="preview_gallery_image_1">
</div>
</div>

Jquery | Add value to name which is attribute of input

I want to add $(this) value when the button is clicked.
uhm. let me show you my code below first.
$("#filenameList button").click(function(){
$(this).parent().remove();
});
$("#file").change(function(){
$("#filenameList div.notyet").remove();
for(var i = 0, len = this.files.length; i < len; i++){
var file = this.files[i];
var fr = new FileReader();
fr.onload = (function (file) {
return function(e) {
var div = document.createElement("div");
$(div).addClass("notyet").css({
margin : "30px"
,position : "relative"
});
//var html = ['<input type="hidden" name="screenshots_filename[]" value="' + file.name + '">'
var html = ['<img src="" width="100%">'
,'<input type="hidden" name="">'
,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">×</span></button>'
].join("");
$(div).append(html);
$(div).find("button").click(function(){
$(this).parent().remove();
});
$(div).find("img").attr("src", e.target.result);
$("#filenameList").append(div);
}
})(file);
fr.readAsDataURL(file);
}
});
All i want to do is verify which element is removed by clicking the button so that i add the value to name attribute that is hidden above html variable.
How can i do this?
<div class="col-xs-4 vcenter from-group">
<h1>test</h1>
<input id="file" type="file" name="inputScreenshots[]" accept="image/*" multiple>
<div id="filenameList" style="width : 400px">
<?
$str = $screenshot_urls;
$arr = explode("+", $str);
foreach ($arr as $filename) {
?>
<div style="margin : 30px; position :relative;">
<input type="hidden" name="screenshots_filename[]" value="<?=$filename?>">
<img src="<?="http://cspmedia.net:3001/gp_images/ames/".$filename?>" width="100%">
<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">×</span></button>
<input type="hidden" name=""> // TODO HERE ##
</div>
<? } ?>
</div>
okay here is the html code. and i really sorry. i was so confused.
I move the todo to bottom code.
I want to know the list of element which is clicked by the button.
I figured out like this. Im new in php so i totally confused about client and server because they are all in just one page.
Anyway this is the code what i wanted. sorry guys.
$("#filenameList button").click(function(){
var targetDom = document.getElementById( "filenameList" );
var targetInput = document.createElement("input");
targetInput.setAttribute("name", "del_img[]" );
targetInput.setAttribute("type","hidden");
targetDom.appendChild(targetInput);
//alert(targetInput.getAttribute("name"));
var filename = $(this).parent().find("input[name='screenshots_filename[]']").val();
alert(filename);
targetInput.setAttribute("value", filename);
$(this).parent().remove();
});
Why i wrote this code is submitting the value and deleting the file in the server.
if (isset($_POST["del_img"])) {
echo "<br/>del_img[] isset";
$tmp = $_POST["del_img"];
// TODO : delete images in server
foreach ($tmp as $value) {
echo "<br/> Unlnk image ::: ".$value;
unlink("http://cspmedia.net:3001/gp_images/games/".$value);
}
}

$('Selector( 'whose value you want to set' )').attr('value',$(this).val());
For example like given below
$('input[type="hidden"]').attr('value',$(this).val());
$(div).find("button").click(function(){
$(this).parent().remove();
// TODO : I want add $(this).val() to input name attribute
});
But note that here you will set the value of button which will gonna clicked.
because in you code $(this) will refer to button as it is picking the that by
.find("button")

Not certain if requirement is to set name at <input type="hidden" name=""> to current file , or previously user selected file , before current change event ?
Solution below attempts to set name at <input type="hidden" name=""> within html array to current file.name
$("#filenameList button").click(function(){
$(this).parent().remove();
});
$("#file").change(function(){
$("#filenameList div.notyet").remove();
for(var i = 0, len = this.files.length; i < len; i++){
var file = this.files[i];
var fr = new FileReader();
fr.onload = (function (file) {
return function(e) {
var div = document.createElement("div");
$(div).addClass("notyet").css({
margin : "30px"
,position : "relative"
});
//var html = ['<input type="hidden" name="screenshots_filename[]" value="' + file.name + '">'
var html = ['<img src="" width="100%">'
,'<input type="hidden" name="'+file.name+'">'
,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">×</span></button>'
].join("");
$(div).append(html);
$(div).find("button").click(function(){
$(this).parent().remove();
});
$(div).find("img").attr("src", e.target.result);
$("#filenameList").append(div);
}
})(file);
fr.readAsDataURL(file);
}
});

Image upload script to be more dynamic

I have a working script that shows a preview of a image a user is wanting to upload which works fine for a single image upload. I now what to use this script on a multiple image upload and would like to have the readURL function in the script work dynamically so I don't have to repeat the lines
$("#patient_pic1").live("change",function(){
readURL(this, "#preview_image1")
});
for every upload container
here is my html
<div class="upload-file-container"> <img id="preview_image1" class="preimg" src="#" alt="" />
<input type="file" id="patient_pic1" name="pic[]" class="photo" />
</div>
<div class="upload-file-container"> <img id="preview_image2" class="preimg" src="#" alt="" />
<input type="file" id="patient_pic2" name="pic[]" class="photo" />
</div>
and the Jquery
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
};
reader.readAsDataURL(input.files[0]);
}
}
$("#patient_pic1").live("change",function(){
readURL(this, "#preview_image1")
});
$("#patient_pic2").live("change",function(){
readURL(this, "#preview_image2")
});
http://jsfiddle.net/6j1kr549/1/

You can do it like:
$('input[type="file"]').on("change",function(){
var target = '#'+$(this).parent().find('img').attr('id');
readURL(this, target);
});
WORKING DEMO

You should use the each() funtion to loop all classes with a same name and get the input controls for each element inside the class:
PD: Counter is For clarification, but is funtional:
var counter = 1;
$('.upload-file-container').each(function() {
$(this, "#patient_pic" + counter.toString()).live("change",function(){
readURL(this, "#preview_image" + counter.toString())
});
counter = counter + 1;
});

Retrieve image src from Local Storage in $.each

I have a loop that retrieves and assignes my data to my elements in the form.
So far it works great. But how can I grab the src from Local Storage and populate image src?
Local Storage:
Key = smallImage1_1
Value = file:///var/mobile/Applications/66294192-6BFD-458B-B571-89ABA5F7F7E8/tmp/cdv_photo_049.jpg
JS:
$(document).ready(function() {
if (localStorage) {
localStorage.setItem("flag", "set");
// Browser supports it
$(".stored").change(function () {
var data = $(this).val();
var thisName = $(this).attr('name');
var thisValue = $(this).val();
localStorage.setItem(thisName, thisValue);
});
// Test if there is already saved data
if (localStorage.getItem("flag") == "set") {
// Same iteration stuff as before
var data = $("#formID").serializeArray();
//only way we can select is by the name attribute, but jQuery is down with that.
$.each(data, function (i, obj) {
$("[name='" + obj.name + "']").val(localStorage.getItem(obj.name));
});
}
}
// save url to local storage
function onPhotoDataSuccess1_1(imageURI) {
var smallImage1_1 = document.getElementById('smallImage1_1');
smallImage1_1.src = imageURI;
var thisValue = smallImage1_1.src;
var thisName = smallImage1_1.name;
localStorage.setItem(thisName, thisValue);}
HTML:
<li class="odd">
<h2>Are there Par levels in place?</h2>
<input name="k11" id="k11" tabindex="1" class="stored" type="text" placeholder="Notes..." >
<div class="bottom">
<div class="ynDropdown" name="k12"></div>
<div class="ratingDropdown" name="k13"></div>
<img style="width:38px;height:38px;" id="smallImage1_1" class="camera" src="../img/camera.png" onclick="capturePhoto1_1();" name="smallImage1_1"/>
<img style="width:38px;height:38px;" id="smallImage1_2" class="camera" src="../img/camera.png" onclick="capturePhoto1_2();" name="smallImage1_2"/>
<img style="width:38px;height:38px;" id="smallImage1_3" class="camera" src="../img/camera.png" onclick="capturePhoto1_3();" name="smallImage1_3"/>
<span class="clear"></span>
</div>
</li>

You can select all required images and set src for each, based on its name:
$('#formID .bottom img').each(function()
{
$(this).attr('src', localStorage.getItem($(this).attr('name')));
});