How to access an image without uploading and display it in an IMG tag [duplicate]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
This question already has an answer here:
How to upload preview image before upload through JavaScript
7 answers
I would like to read the URL of an image selected in an <input type="file">tag and then display the corresponding image without uploading the file to the server first.
<input type='flie'id='anything' name='anything'>
and outputted in
<div id='showimg'></div>
without uploading it first.
javascript html input
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
asked Nov 15 '18 at 13:37
P PP P
63
marked as duplicate by Antwane, Cœur, Community♦ Nov 20 '18 at 5:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 3 more comments
This question already has an answer here:
How to upload preview image before upload through JavaScript
7 answers
I would like to read the URL of an image selected in an <input type="file">tag and then display the corresponding image without uploading the file to the server first.
<input type='flie'id='anything' name='anything'>
and outputted in
<div id='showimg'></div>
without uploading it first.
javascript html input
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
asked Nov 15 '18 at 13:37
P PP P
63
marked as duplicate by Antwane, Cœur, Community♦ Nov 20 '18 at 5:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
try googling for upload file using ajax
– JoSSte
Nov 15 '18 at 13:48
1
@JoSSte you may as well recommend Stack Overflow internal search: stackoverflow.com/search?q=upload+ajax
– Cœur
Nov 15 '18 at 14:03
its not helpful.. i just want img in that div when i choose some pic from input type file.. by using onchange function..
– P P
Nov 15 '18 at 15:45
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
– JoSSte
Nov 16 '18 at 8:59
@JoSSte instead of writing comment, flag question as duplicate - this results in comment like mine above.
– barbsan
Nov 16 '18 at 10:06
|
show 3 more comments
This question already has an answer here:
How to upload preview image before upload through JavaScript
7 answers
I would like to read the URL of an image selected in an <input type="file">tag and then display the corresponding image without uploading the file to the server first.
<input type='flie'id='anything' name='anything'>
and outputted in
<div id='showimg'></div>
without uploading it first.
javascript html input
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
asked Nov 15 '18 at 13:37
P PP P
63
This question already has an answer here:
How to upload preview image before upload through JavaScript
7 answers
I would like to read the URL of an image selected in an <input type="file">tag and then display the corresponding image without uploading the file to the server first.
<input type='flie'id='anything' name='anything'>
and outputted in
<div id='showimg'></div>
without uploading it first.
This question already has an answer here:
How to upload preview image before upload through JavaScript
7 answers
javascript html input
javascript html input
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
asked Nov 15 '18 at 13:37
P PP P
63
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
asked Nov 15 '18 at 13:37
P PP P
63
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
edited Nov 16 '18 at 10:18
SaschaM78
2,37422634
2,37422634
asked Nov 15 '18 at 13:37
P PP P
63
asked Nov 15 '18 at 13:37
P PP P
63
asked Nov 15 '18 at 13:37
P PP P
63
63
marked as duplicate by Antwane, Cœur, Community♦ Nov 20 '18 at 5:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Antwane, Cœur, Community♦ Nov 20 '18 at 5:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
try googling for upload file using ajax
– JoSSte
Nov 15 '18 at 13:48
1
@JoSSte you may as well recommend Stack Overflow internal search: stackoverflow.com/search?q=upload+ajax
– Cœur
Nov 15 '18 at 14:03
its not helpful.. i just want img in that div when i choose some pic from input type file.. by using onchange function..
– P P
Nov 15 '18 at 15:45
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
– JoSSte
Nov 16 '18 at 8:59
@JoSSte instead of writing comment, flag question as duplicate - this results in comment like mine above.
– barbsan
Nov 16 '18 at 10:06
|
show 3 more comments
try googling for upload file using ajax
– JoSSte
Nov 15 '18 at 13:48
1
@JoSSte you may as well recommend Stack Overflow internal search: stackoverflow.com/search?q=upload+ajax
– Cœur
Nov 15 '18 at 14:03
its not helpful.. i just want img in that div when i choose some pic from input type file.. by using onchange function..
– P P
Nov 15 '18 at 15:45
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
– JoSSte
Nov 16 '18 at 8:59
@JoSSte instead of writing comment, flag question as duplicate - this results in comment like mine above.
– barbsan
Nov 16 '18 at 10:06
try googling for upload file using ajax
– JoSSte
Nov 15 '18 at 13:48
try googling for upload file using ajax
– JoSSte
Nov 15 '18 at 13:48
1
1
@JoSSte you may as well recommend Stack Overflow internal search: stackoverflow.com/search?q=upload+ajax
– Cœur
Nov 15 '18 at 14:03
@JoSSte you may as well recommend Stack Overflow internal search: stackoverflow.com/search?q=upload+ajax
– Cœur
Nov 15 '18 at 14:03
its not helpful.. i just want img in that div when i choose some pic from input type file.. by using onchange function..
– P P
Nov 15 '18 at 15:45
its not helpful.. i just want img in that div when i choose some pic from input type file.. by using onchange function..
– P P
Nov 15 '18 at 15:45
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
– JoSSte
Nov 16 '18 at 8:59
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
– JoSSte
Nov 16 '18 at 8:59
@JoSSte instead of writing comment, flag question as duplicate - this results in comment like mine above.
– barbsan
Nov 16 '18 at 10:06
@JoSSte instead of writing comment, flag question as duplicate - this results in comment like mine above.
– barbsan
Nov 16 '18 at 10:06
|
show 3 more comments
1 Answer
1
active
oldest
votes
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
what you want is to have your <input type=image>, and have an onchange action which reads the path of the image, and then takes that path and puts in the src part of an img tag.
Something like this: (no guarantee for this to work. look up the specifics...)
<html>
<head>
<script>
function updateimgref()
var img = document.getElementById("outputimg");
var input = document.getElementById("imginput");
if (input.files && input.files[0])
img.href = input.result;
</script>
</head>
<body>
<input type="image" id="imginput" onchange="updateimgref()">
<img id="outputimg" href="myblankplaceholder.png">
</body>
</html>
se also
HTML input type=file, get the image before submitting the form
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
Tysm man...(y)..
– P P
Nov 20 '18 at 5:45
if it helped, mark it as accepted answer ;-)
– JoSSte
Nov 20 '18 at 16:11
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
what you want is to have your <input type=image>, and have an onchange action which reads the path of the image, and then takes that path and puts in the src part of an img tag.
Something like this: (no guarantee for this to work. look up the specifics...)
<html>
<head>
<script>
function updateimgref()
var img = document.getElementById("outputimg");
var input = document.getElementById("imginput");
if (input.files && input.files[0])
img.href = input.result;
</script>
</head>
<body>
<input type="image" id="imginput" onchange="updateimgref()">
<img id="outputimg" href="myblankplaceholder.png">
</body>
</html>
se also
HTML input type=file, get the image before submitting the form
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
Tysm man...(y)..
– P P
Nov 20 '18 at 5:45
if it helped, mark it as accepted answer ;-)
– JoSSte
Nov 20 '18 at 16:11
add a comment |
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
what you want is to have your <input type=image>, and have an onchange action which reads the path of the image, and then takes that path and puts in the src part of an img tag.
Something like this: (no guarantee for this to work. look up the specifics...)
<html>
<head>
<script>
function updateimgref()
var img = document.getElementById("outputimg");
var input = document.getElementById("imginput");
if (input.files && input.files[0])
img.href = input.result;
</script>
</head>
<body>
<input type="image" id="imginput" onchange="updateimgref()">
<img id="outputimg" href="myblankplaceholder.png">
</body>
</html>
se also
HTML input type=file, get the image before submitting the form
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
Tysm man...(y)..
– P P
Nov 20 '18 at 5:45
if it helped, mark it as accepted answer ;-)
– JoSSte
Nov 20 '18 at 16:11
add a comment |
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
what you want is to have your <input type=image>, and have an onchange action which reads the path of the image, and then takes that path and puts in the src part of an img tag.
Something like this: (no guarantee for this to work. look up the specifics...)
<html>
<head>
<script>
function updateimgref()
var img = document.getElementById("outputimg");
var input = document.getElementById("imginput");
if (input.files && input.files[0])
img.href = input.result;
</script>
</head>
<body>
<input type="image" id="imginput" onchange="updateimgref()">
<img id="outputimg" href="myblankplaceholder.png">
</body>
</html>
se also
HTML input type=file, get the image before submitting the form
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
what you want is to have your <input type=image>, and have an onchange action which reads the path of the image, and then takes that path and puts in the src part of an img tag.
Something like this: (no guarantee for this to work. look up the specifics...)
<html>
<head>
<script>
function updateimgref()
var img = document.getElementById("outputimg");
var input = document.getElementById("imginput");
if (input.files && input.files[0])
img.href = input.result;
</script>
</head>
<body>
<input type="image" id="imginput" onchange="updateimgref()">
<img id="outputimg" href="myblankplaceholder.png">
</body>
</html>
se also
HTML input type=file, get the image before submitting the form
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
edited Nov 16 '18 at 9:27
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
answered Nov 16 '18 at 9:01
JoSSteJoSSte
1,07921833
1,07921833
Tysm man...(y)..
– P P
Nov 20 '18 at 5:45
if it helped, mark it as accepted answer ;-)
– JoSSte
Nov 20 '18 at 16:11
add a comment |
Tysm man...(y)..
– P P
Nov 20 '18 at 5:45
if it helped, mark it as accepted answer ;-)
– JoSSte
Nov 20 '18 at 16:11
Tysm man...(y)..
– P P
Nov 20 '18 at 5:45
Tysm man...(y)..
– P P
Nov 20 '18 at 5:45
if it helped, mark it as accepted answer ;-)
– JoSSte
Nov 20 '18 at 16:11
if it helped, mark it as accepted answer ;-)
– JoSSte
Nov 20 '18 at 16:11
add a comment |
try googling for upload file using ajax
– JoSSte
Nov 15 '18 at 13:48
1
@JoSSte you may as well recommend Stack Overflow internal search: stackoverflow.com/search?q=upload+ajax
– Cœur
Nov 15 '18 at 14:03
its not helpful.. i just want img in that div when i choose some pic from input type file.. by using onchange function..
– P P
Nov 15 '18 at 15:45
"Upload" infers transferring an image from the client to the server. If you just want to display the image, that is ENTIRELY different.
– JoSSte
Nov 16 '18 at 8:59
@JoSSte instead of writing comment, flag question as duplicate - this results in comment like mine above.
– barbsan
Nov 16 '18 at 10:06