I'm using this tech : link to get images from local clients, i don't want save it on my server. Can i (in javascript) set a div backgroundImage width this image ?
Now this is my code :
var input9I1 = document.createElement("input");
input9I1.id = "input9I1";
input9I1.type = "file";
input9I1.name = "files[]";
input9I1.accept = "image/*";
input9I1.addEventListener('change', handleFileSelect, false);
td20I1.appendChild(input9I1);
So it was the creation of the input and it work fine.
Now the function :
function handleFileSelect(evt){
imgageATraiter = evt.target.files[0];
console.log(imgageATraiter.name);
console.log(imgageATraiter.type);
console.log(imgageATraiter.size);
console.log(imgageATraiter.lastModifiedDate);
console.log(imgageATraiter.lastModifiedDate.toLocaleDateString());
document.getElementById('boite5I1').style.backgroundImage = imgageATraiter.name;}
So what i want is how can i modify the "boite5I1" 's background with my image ? Is it possible ? Thanks to read and have a good day :D
You should try below code in handleFileSelect function.
if (imgageATraiter) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('boite5I1')
.attr('src', e.target.result)
.width(50)
.height(50);
};
reader.readAsDataURL(imgageATraiter );
}
Thanks nicael the answer is :
function handleFileSelect(evt){
imgageATraiter = evt.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$('#boite5I1').css('background', 'transparent url('+e.target.result +') left top no-repeat');
}
reader.readAsDataURL(evt.target.files[0]);}
Thanks so much and have a good day :D
Related
Hi I am using native HTML5 drag and drop to upload files to the server. I want to get the name of the file being uploaded from the local system. I am unable to get the name of the file being dropped in the drop zone. Below is the code i have tried. Any help would be appreciated
var reader = new FileReader();
reader.onload = function (event) {
var childrenDivs = document.getElementById("holder").children
var temp
if(childrenDivs.length > 0){
var lastDiv = childrenDivs[childrenDivs.length - 1]
temp = parseInt(lastDiv.id.split("_")[1]) + 1
}else{
temp = 1
}
var imageDiv = document.createElement('div')
imageDiv.id = "uploadedImage_"+temp
var image = new Image();
image.src = event.target.result;
console.log(event.target.fileName)
instead of console.log(event.target.fileName) i have also tried console.log(event.target.files[0].name) and console.log(event.dataTrasfer.files[0]). Could anyone please help me out here.
Where are you calling reader.readAs... method?
AFAIK, the proper place to get the filename would be where you register the drop event of a dom element.
element.ondrop = function(e) {
e.preventDefault();
var reader = new FileReader();
reader.onload = function (event) {
....
}
var file = e.dataTransfer.files[0];
// can get the name of the file with file.name
console.log(file.name);
reader.readAsBinaryString(file);
}
the main thing that I am trying to do is get this simple image uploader to also allow the user to enter and store a description along with the image that is uploaded. Also some way to clear the images stored once they are in the preview.
What I currently have is
<html>
<body>
<script type='text/javascript'>
function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);
var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
document.body.appendChild(imageLoaded);
};
fileReader.readAsDataURL(fileToLoad);
}
}
}
main();
</script>
</body>
</html>
Any help you can give would be greatly appreciated!
To get a description just create another input element within the form. Your code is not showing how you actually upload the image. So I guess it's a form with a POST action?
To clear the image, just add a button that removes the "img" element. For ease of use, just make the "imageLoaded" global and then remove that from the DOM when pressing that button.
function handleImage(e)
{
var reader = new FileReader();
reader.onload = function(event)
{
var img = new Image();
img.onload = function()
{
var imgInstance = new fabric.Image(img);
imgInstance.setWidth(50);
imgInstance.setHeight(50);
imgInstance.set({maxWidth:120,maxHeight:100});
imgInstance.setLeft(50);
imgInstance.top = 50;
canvas.add(imgInstance);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
my intention is when i add image to canvas using input file , at the same time it also add the image to a div.
now if the user delete the canvas image the div image also be deleted , but how i going to make this possible? i need some on image canvas detail.
my question
1.can anyone point me a right way to doing it ? making this idea possible
2.can i give the canvas image a name ?
something like imgInstance.name("mymainimage");
check my DEMO if you are not understand ,it will make more clearly.
1.try add few small image.
If you want to react to something like the delete key pressed, add an event listener:
var canvas = document.getElementById("canvas_id");
canvas.addEventListener( "keydown", keyDown, true);
function keyDown(e) {
// check keyCode, delete is 46
if ( e.keyCode == 46 ) {
// remove here
}
}
I do not know much about fabricjs but you can certainly keep a reference to an instance of your canvas image in dictionary/map (js object) and retrieve it by key (your unique name).
canvasImgByKey = {};
// Keep reference before adding to canvas.
canvasImgByKey[imgNameHere] = imgInstance;
...
// Get by reference later on.
imgInstance = canvasImgByKey[imgNameHere];
// ... do something with the instance here (delete) ...
jsFiddle : http://jsfiddle.net/ckqk2Lzs/20/
jQuery
function onKeyDownHandler(e)
{
switch (e.keyCode) {
case 46: // delete
//delete item
var activeObject = canvas.getActiveObject();
if (activeObject)
{
canvas.remove(activeObject);
$('img').filter("[src='"+activeObject.getSrc()+"']").hide();
}
return;
}
}
Just look for the img element which has the activeObject's source and then simply hide it.
P.S. this won't work for multiple images that are the same but I hope this points you in the right direction
I'm building my own WYSIWYG editor, using an iframe, I'd like to find just a way to simply insert an image! I already got the Bold style, Italic style, H1 and H2, using JS:
function bold(){
editor.document.execCommand("bold", false, null)
}
function italic(){
editor.document.execCommand("italic", false, null)
}
function h1(){
editor.document.execCommand('formatBlock',false,'h1');
}
function h2(){
editor.document.execCommand('formatBlock',false,'h2');
}
That works very well but I'm struggling with "Insert image button"
Since I'm really new with coding, I was trying this:
function image(){
var image = prompt ("Paste or type a link", "http://")
editor.document.execCommand("createImage", false, image)
But that doesn't work. My intention is that the users have the possibility to upload images from their computer and/or from internet. Please, if anyone knows how to insert an image... help!
A LOT OF THANKS IN ADVANCE!
Have you tried formatting your image location using a relative link where the # symbol precedes the image location. Your code and explanation also doesn't explain are they uploading the image from their machine in a location like My Documents or if they are uploading the image strictly from and http link.
To upload from a local machine using Javascript and HTML, you might checkout this code. Your question is one that regularly comes up when writing custom Javascript functions.
<script type='text/javascript'>
function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);
var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
document.body.appendChild(imageLoaded);
};
fileReader.readAsDataURL(fileToLoad);
}
}
}
main();
</script>
You can check out the full article on this issue of image uploads using Javascript and HTML 5 here: https://thiscouldbebetter.wordpress.com/2012/12/20/uploading-and-displaying-an-image-from-a-file-using-html5-and-javascript/
It should be "insertimage" instead of createImage.
function image(){var image = prompt ("Paste or type a link", "http://")editor.document.execCommand("insertimage", false, image)}
you can use this post
var insertImgTag = document.createElement("div");
insertImgTag.id = "insertImgTag";
if (document.getSelection().anchorNode != null) {
document.getSelection().getRangeAt(0).insertNode(insertImgTag);}
$("#insertImgTag")
.parent()
.html(
"<img src=/images/" + $("#name").val() + " width='" + imgWidth + "%' alt='" + imgAlt + "'>"
);
that I used it in my own javascript editor according to this post
I am using https://code.google.com/p/jquery-multifile-plugin/
I am trying to display the thumbnail of the image that was just selected with the following code:
$(function() {
var doc = document;
var oError = null;
var oFileIn = doc.getElementById('file-upload');
var oFileReader = new FileReader();
var oImage = new Image();
oFileIn.addEventListener('change', function () {
alert("in");
var oFile = this.files[this.files.length-1];
//rest of the code
});
It works for the first image. When I try to add another the event isn't triggered, any suggestions?