Develop Reference

Detect Keyboard keys and add function for this using jQuery

Hi i have an image upload form , and when selecting upload the image it will show the preview also.
$( function() {
var inputLocalFont = document.getElementById("user_file");
inputLocalFont.addEventListener("change",previewImages,false);
function previewImages(){
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for(var i = 0; i < fileList.length; i++){
var objectUrl = anyWindow.createObjectURL(fileList[i]);
$('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
window.URL.revokeObjectURL(fileList[i]);
}
$( ".img-div" ).draggable();
$( ".img-div" ).resizable();
$(".newly-added").on("click", function(e) {
$(".newly-added").removeClass("img-selected");
$(this).addClass("img-selected");
e.stopPropagation();
});
$(document).on("click", function(e) {
if ($(e.target).is(".newly-added") === false) {
$(".newly-added").removeClass("img-selected");
}
});
}
});
.new-multiple {
width:400px !important;
height:400px !important;
background:white;
border:2px solid red;
overflow:hidden;
}
.img-div {
width:200px;
height:200px;
}
.newly-added {
width:100%;
height:100%;
}
.img-selected{
box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">
<div class="new-multiple"></div>
I write both resizable, draggable function for the images .
so here when I click on selected img and press delete button on keyboard I need to delete that image . If press undo through keyboard I have to get it back . How can I achieve this
I see jQuery. Hotkeys , https://github.com/jeresig/jquery.hotkeys
and I write the following code . but it is not working
$('.img-selected').bind('del', '$', function(){
alert("yes");
});
Please check this
https://jsfiddle.net/vd11qyzv/7/
UPDATED FIDDLE
Please check this https://jsfiddle.net/vd11qyzv/9/ . Here
if ($(e.target).is(".newly-added") === true) { alert('abc'); } is not working.

The keyboard event is not going to img-selected object.
Until now for keyboard handling I used this format and worked well.
$(document).on('keydown', handleKeyDown);
function handleKeyDown(e){
if(e.keyCode === 46)//delete Key{
deleteActiveObject();
}
}
Hope this helps you.

Can I insert an image on the input file one by one in one submit

When I insert images one by one, the 'input file' only reads one picture only.
But when I insert images in multiple, the result is read as much as the image that the user inputs
window.onload = function() {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";
output.insertBefore(div, null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
} else {
console.log("Your browser does not support File API");
}
}
article {
width: 80%;
margin: auto;
margin-top: 10px;
}
.thumbnail {
height: 100px;
margin: 10px;
}
<article>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<div id="result"></div>
</article>
Please do multiple image input, and one by one

If you want to upload a photo multiple.
This method will prevent, where the user has entered one picture, then, the user will be able to enter the next picture before uploading
$(document).ready(function() {
$(document).on("click", 'input[name="images-post[]"]', function() {
$('.menu-create-post .mdi-camera').append('<input type="file" name="images-post[]" accept="image/*" multiple="multiple">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="span-wrapper" style="display: inline-block;">
<input type="file" name="images-post[]"/>
</span>
</div>
<div class="menu-create-post">
<div class="mdi-camera"></div>
</div>

Cannot read property 'target' of undefined / TypeError: event is undefined

I want to upload an image by clicking on the image element with id='IBrowse' but an error occurs when I click on the that image.
Cannot read property 'target' of undefined(…) (in Chrome)
TypeError: event is undefined (in Firefox)
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback pull-right bordered">
<img id="HImg" src="~/b/b.jpg" style="height: 120px; max-width: 100%; width: 280px; position:relative", class="img-responsive" />
<img id="IBrowse" src="~/a/a.png" style="position: absolute; width: 20%; top: 5%; left: 17%;" />
#Html.TextBoxFor(m => m.Img, new { #class = "form-control has-feedback-left file btntag", style = "display: none;", #onchange = "open(e)", #type = "file", placeholder = "Upload Image" })
#Html.ValidationMessageFor(m => m.Img, "", new { #class = "text-danger" })
</div>
$(function () {
$('#IBrowse').on('click', function () {
$('#Img').trigger('onchange');
});
});
onchange event code
<script>
var IsUpdate = false;
var open = function (event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function () {
var dataURL = reader.result;
var output = document.getElementById('ImgHTMLElement');
output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
};
</script>
Also, the CSS is not working:
#IBrowse:hover {
width: 23%;
}

I never use onchange so maybe there is a way to do this there. However, I would simply drop the onchange="....." and use a handler like this:
<script>
var IsUpdate = false;
$('#Img').on('change', function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var dataURL = reader.result;
var output = document.getElementById('ImgHTMLElement');
output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
});
</script>
As for your css issue, the problem is that you define an inline style like:
<img id="HImg" src="~/b/b.jpg" style="height: 120px; max-width: 100%; width: 280px; position:relative", class="img-responsive" />
The css rule #IBrowse:hover {width: 23%;} is applied, but it will not override the inline style setting which has a higher precedence. You can overcome that by
Option 1) Preferred method
Move your inline style to a css rule instead of inline like this:
#IBrowse{
position: absolute;
width: 20%;
top: 5%;
left: 17%;
}
#IBrowse:hover {
width: 23%;
}
jsFiddle example
Option 2)
Leave the inline style and add !important to the hover css rule like this:
#IBrowse:hover {
width: 23% !important;
}
jsFiddle example

I haven't tested your code but if you want your open function to be passed the event object you should specify it as event rather than e in the onchange attribute definition, since this is not an assignment to the the event itself, but a callback function body that already has been passed the event parameter:
#onchange = "open(event)"

Drag and drop do not send the data as expected

Note:I'm new to javascript.
I have the following code which allows the user to preview an image before uploading it.
The input element works fine and the selected image is displayed as expected.
However, the drag and drop throws an error that,
Uncaught TypeError: Cannot read property 'files' of undefined
I think I am taking the dropped file object in a wrong way any help would be greatly appreciated.
(function($){
$(document).ready(function(){
function renderImage(file)
{
var reader = new FileReader();
reader.onload = function(event) {
the_url = event.target.result
$('#preview').html("<img width='150px' height = '100px'src='" + the_url + "' />")
}
reader.readAsDataURL(file);
}
//This is for the input and works fine.
$('#file').change( function (){
renderImage(this.files[0])
});
//The drag is the one with problem.
//it produces the following error
/*
*Uncaught TypeError: Cannot read property 'files' of undefined
*/
$("#drop").on('dragenter', function (e){
e.preventDefault();
$(this).css('background', '#BBD5B8');
});
$("#drop").on('dragover', function (e){
e.preventDefault();
});
$("#drop").on('drop', function (e){
$(this).css('background', '#D8F9D3');
e.stopPropagation();
e.preventDefault();
var dt = e.target.files || (e.dataTransfer && e.dataTransfer.files);
var files = dt.files;
renderImage(files);
});
});
})(jQuery)
#drop
{
width:300px;
height:100px;
border:dotted 1px;
border-radius:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "upload">
<div id = "drop">
</div>
<input type ="file" id = "file">
<div id = "preview">
</div>
</div>

My proposal is, where I corrected also the "Uncaught TypeError: Cannot read property 'files' of undefined" (only for FF it's necessary to double the input field):
(function($){
$(document).ready(function() {
function renderImage(file)
{
var reader = new FileReader();
reader.onload = function(event) {
the_url = event.target.result
$('#preview').html("<img width='150px' height = '100px'src='" + the_url + "' />")
}
reader.readAsDataURL(file);
}
//This is for the input and works fine.
$('input[type^="file"]').change( function (){
renderImage(this.files[0])
});
//The drag is the one with problem.
//it produces the following error
/*
*Uncaught TypeError: Cannot read property 'files' of undefined
*/
$("#drop").on('dragenter', function (e){
event.target.style.background = '#BBD5B8';
});
$("#drop").on('dragover', function (e){
e.preventDefault();
});
$("#drop").on('drop', function (e){
event.target.style.background = '#D8F9D3';
e.stopPropagation();
e.preventDefault();
var dt = (e.originalEvent.target.files && e.originalEvent.target.files.length > 0) || (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files);
var files = dt[0];
renderImage(files);
});
});
})(jQuery);
#drop
{
width:300px;
height:100px;
border:dotted 1px;
border-radius:5px;
}
#drop input {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
opacity: 0.0;
filter: alpha(opacity=0);
font-size: 300px;
height: 100px;
}
#drop label {
position: absolute;
top: 40px;
width: 250px;
text-align: center;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div id="upload">
<div id="drop">
<label id="fileLbl">Drop a file here</label>
<input type ="file" id = "file1">
</div>
<input type ="file" id = "file2">
<div id = "preview">
</div>
</div>

I believe the issue is with your HTML. Try moving your input inside of your #drop div
<div id = "upload">
<div id = "drop">
<input type ="file" id = "file">
</div>
<div id = "preview">
</div>
</div>

Show images one after one after some interval of time

I am new person in Front End Development and i am facing one major problem is that i have 3 images placed on each others and now i want to move one image so the other image comes up and then it goes and third image comes up after some interval of time.
I want three images on same position in my site but only wants to see these three images one after one after some interval of time.
Please help how i can do this??
May i use marquee property or javascript???

Non-jQuery Option
If you don't want to go down the jquery route, you can try http://www.menucool.com/javascript-image-slider. The setup is just as easy, you just have to make sure that your images are in a div with id of slider and that div has the same dimensions as one of your images.
jQuery Option
The jQuery cycle plugin will help you achieve this. It requires jquery to work but it doesn't need much setting up to create a simple sliple slideshow.
Have a look at the 'super basic' demo:
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
It has many options if you want something a bit fancier.

Here you go PURE JavaScript solution:
EDIT I have added image rotation... Check out live example (link below)
<script>
var current = 0;
var rotator_obj = null;
var images_array = new Array();
images_array[0] = "rotator_1";
images_array[1] = "rotator_2";
images_array[2] = "rotator_3";
var rotate_them = setInterval(function(){rotating()},4000);
function rotating(){
rotator_obj = document.getElementById(images_array[current]);
if(current != 0) {
var rotator_obj_pass = document.getElementById(images_array[current-1]);
rotator_obj_pass.style.left = "-320px";
}
else {
rotator_obj.style.left = "-320px";
}
var slideit = setInterval(function(){change_position(rotator_obj)},30);
current++;
if (current == images_array.length+1) {
var rotator_obj_passed = document.getElementById(images_array[current-2]);
rotator_obj_passed.style.left = "-320px";
current = 0;
rotating();
}
}
function change_position(rotator_obj, type) {
var intleft = parseInt(rotator_obj.style.left);
if (intleft != 0) {
rotator_obj.style.left = intleft + 32 + "px";
}
else if (intleft == 0) {
clearInterval(slideit);
}
}
</script>
<style>
#rotate_outer {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 240px;
margin-top: -120px;
margin-left: -160px;
overflow: hidden;
}
#rotate_outer img {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<html>
<head>
</head>
<body onload="rotating();">
<div id="rotate_outer">
<img src="0.jpg" id="rotator_1" style="left: -320px;" />
<img src="1.jpg" id="rotator_2" style="left: -320px;" />
<img src="2.jpg" id="rotator_3" style="left: -320px;" />
</div>
</body>
</html>
And a working example:
http://simplestudio.rs/yard/rotate/rotate.html

If you aim for good transition and effect, I suggest an image slider called "jqFancyTransitions"

<html>
<head>
<script type="text/javascript">
window.onload = function(){
window.displayImgCount = 0;
function cycleImage(){
if (displayImgCount !== 0) {
document.getElementById("img" + displayImgCount).style.display = "none";
}
displayImgCount = displayImgCount === 3 ? 1 : displayImgCount + 1;
document.getElementById("img" + displayImgCount).style.display = "block";
setTimeout(cycleImage, 1000);
}
cycleImage();
}
</script>
</head>
<body>
<img id="img1" src="./img1.png" style="display: none">
<img id="img2" src="./img2.png" style="display: none">
<img id="img3" src="./img3.png" style="display: none">
</body>
</html>​
Fiddle: http://jsfiddle.net/SReject/F7haV/

arrayImageSource= ["Image1","Image2","Image3"];
setInterval(cycle, 2000);
var count = 0;
function cycle()
{
image.src = arrayImageSource[count]
count = (count === 2) ? 0 : count + 1;
}​
Maybe something like this?