Develop Reference

Html use file from user and set as background?

I have this code for choosing a file in HTML, and I want to allow the user to choose a file, and then be able to set it as the background. Heres the code for choosing the file
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
Or is there a way I could access the camera of the user in HTML? Basically, I want the user to be able to choose an image or take an image, and then set the image as the background.

Yes we can take advantage the browser's FileReader API to read files and use the file on client side
Below is a typical example of using the FileReader API for your use case:
function sendFile() {
// IN YOUR ACTUAL CODE REPLACE DEMODIV WITH
// document.body or the body of your html
const demoDiv = document.querySelector('#demo');
const file = document.querySelector('#file1').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// setting image file convert to base64 string as demoDiv's background
demoDiv.style.backgroundImage = `url(${reader.result})`;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
#demo {
width: 100%;
height: 400px;
}
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
<div id="demo"></div>
Reference: reader.readFileAsDataUrl

Removing uploaded Image

I can upload an image and preview it using the following HTML code and function. But after I select the image and preview it, I don't want to actually upload the image, I want to reset the entire form.
How can I just remove the uploaded image?
HTML:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
<input type="file" id="imgInp" style="margin-top: 4px;" />
<img id="status-img" src="#" alt="" width="150" height="150" />
<input type="submit" name="post" value="Post" class="post-btn" id="submit" />
</div>
</form>
Javascript:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#status-img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
Please help me guys!

Subham, the JS code you are using is not upload your image to server. It just convert your selected image into BASE64 and show it on an image tag. If you want to remove that image from preview, just reset the src tag of image like:
$('#status-img').attr('src', '');
or
$('#status-img').removeAttr('src');
And to remove the selected image from input type image:
$('#imgInp').val('');

How to browse the img src javascript

Here is what i need to do.
So i have this code
<input type="file" id="uploadImage" name="image" />
<input type="submit" id="ImageName" name="submit" value="Submit">
So when i click the "Choose.." button to browse an image, i want the path of that image to be saved in a variable.
Or basically what i need to do is to make this path to be src of an image.
$('#Imageholder').append('<img src="" class="ImgCoords" >');
Any ideas?
Sorry if the explanation is bad :

Here is an example that i have made , adapt it to your need :
DEMO HERE
I added a button remove uploaded file,if you don't like show/hide effect just delete slow , Image is shown only on upload:
$('#blah').hide();
$('#remove').hide();
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
if( $('#imgInp').val()!=""){
$('#remove').show();
$('#blah').show('slow');
}
else{ $('#remove').hide();$('#blah').hide('slow');}
readURL(this);
});
$('#remove').click(function(){
$('#imgInp').val('');
$(this).hide();
$('#blah').hide('slow');
$('#blah').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png');
});
HTML Code:
<form id="form1">
<input type='file' id="imgInp" name='image'/>
<img id="blah" src="#" alt="your image" />
</form>

If you are using HTML5,you can.
See here for the File API. by W3C
The below key line from API
var file = document.getElementById('file').files[0];
But if you are not using HTML5
For security reasons you cannot do that.html doesn't have access to file system information.
MIght be useful :Preview an image before it is uploaded

Jquery: How to dynamically SHOW image using the "value" of <input type="file"> Field

I was wondering whether there is a way to dynamically display an image that a user just uploaded to the input type="file" field.
For example, so far I have the following code:
image_upload.html
<form id ="image_upload_form" action="" method="post" enctype="multipart/form-data">
<input id ="id_iamge" type="file" name="image" />
<input type="submit" value="Upload" />
</form>
<div id="image_view">
<img id="uploaded_image">
</div>
upload.js
$(document).ready(function() {
$("#id_image").change(file_select);
});
function file_select(event) {
$("#uploaded_image").attr("src", $("#id_image").val());
}
So I basically want to show the image that the user just uploaded on the Field.
Of course, I know I can easily view the image if the user already SUBMITTED the form, and when the image is already inside my Database server.
However, I want to preview the image BEFORE the image is submitted into the database server.
In order to do this, I guess I have to find out the PATH of the Image in the Uploader's own computer and then set that "Local path" as the "src" of the image.
Is there a way to fetch this LOCAL PATH of the image that the user just submitted?
(My Javascript code above obviously didn't work, since it just sets the NAME of the image file, not the absolute Path, as the "src". For example, when I run that code and upload an image, I get this:
The Result:
<img id="uploaded_image" src="random_image.jpg" />
which doesn't show anything.

Take a look at this sample, this should work: http://jsfiddle.net/LvsYc/
HTML:
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
JS:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});

Use this code. It will work:
<!-- Java script code, use jquery library. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function showimagepreview(input)
{
if (input.files && input.files[0])
{
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#imgDisplayarea').attr('src', e.target.result);
};
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
<!-- HTML -->
<form>
<div>
<input type="file" name="imgShow" id="imgShow" onchange="imagePreview(this)" />
</div>
<img id="imgDisplayarea"/>
</form>

Get img src from input box into a div

The idea behind this small project of mine is to have an user enter an URL for an img, when the user hits a button the img should then be inserted into a new <div> within the page.
I tried looking for hours at stackoverflow but I honestly don't understand how I can use other answers to my own code. Most of the CSS and HTML code is already done, I just need help with the javascript part if its possible at all.
Here is what I have so far:
HTML code:
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed()" />
</form>
Javascript code:
<script type="text/javascript">
function GetFeed(imgForm) {
var imgSrc = document.getElementById("src").value;
}
</script>
Can anyone help me out? I dont know where to go from here.. at least give me some pointers how can i get the value from the txt box and add a new
<div><img src="user input from txt box should go here"/></div> for every time an unser inserts and new URL for an img?

I think according to your need how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> you need this
HTML
<form>
<input type="text" id="txt">
<input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
JS (goes inside your head tags)
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.src=url;
div.appendChild(img);
document.getElementById('images').appendChild(div);
return false;
}
Here is an example. ​

You should add an id attribute to your <input>:
<input type="text" name="inputbox1" id="box1" value="src" />
...then, adjust your code:
var imgSrc = document.getElementById('box1').value;
Once you have the source, you can get back an object for the img tag, and set its properties using the value from the text box. The img object's properties are defined by the Document Object Model:
http://www.w3schools.com/jsref/dom_obj_image.asp

Something like this will create a div with an image element that has a src equal to the text in the input box. It then appends the div to end of the page.
<html>
<head>
<script type="text/javascript">
function GetFeed(form){
var imgSrc = form.elements["inputbox1"].value;
var imgDiv = document.createElement('div');
imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
document.body.appendChild(imgDiv);
}
</script>
</head>
<body>
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
</form>
</body>
</html>

your codes better should be like this:
html Codes:
<div class="input-group col-md-5" style="margin: 0px auto;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-image">
Choose
</button>
</div>
<input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
<img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>
js Codes:
function getImg(){
var url = document.getElementById('image_label').value;
var img = document.getElementById('imgThumb');
img.src = url;
return true;
}