I want to get the fullpath of image that i select in , and the problem after i select the image there is no image appear.
help me please :)
Here is my code.
JAVASCRIPT
<script type="text/javascript">
function imgchange()
{
var filePath = $('#file').val();
$("#imgs").attr('src',filePath);
}
</script>
HTML
<form action="#" method="post" enctype="multipart/form-data">
<center>
<table>
<tr>
<td colspan="2"><center><img id="imgs" width="170px" height="160px" ></img></center></td>
</tr>
<tr>
<td align="right"><b><label for="file">Filename:</label></b></td><td><input type="file" name="file" id="file" onchange="imgchange()"></td>
</tr>
</table>
</center>
<div class="buttons_save">
<button class="buttons_profile3" id="btnSubmit" >SAVE</button>
</div>
</form>
DEMO: - JSFIDDLE
Try this:
Here is the HTML code:-
<input type="file" id="i_file" value="">
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
Here is the JS:-
$('#i_file').change( function(event) {
$("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
});
Try this http://jsfiddle.net/wTd58/
HTML
<form action="#" method="post" enctype="multipart/form-data">
<center>
<table>
<tr>
<td colspan="2">
<center><img id="imgs" width="170px" height="160px" ></img></center>
</td>
</tr>
<tr>
<td align="right"><b><label for="file">Filename:</label></b></td>
<td><input type="file" name="file" id="file" onchange="imgchange(this)"></td>
</tr>
</table>
</center>
<div class="buttons_save">
<button class="buttons_profile3" id="btnSubmit" >SAVE</button>
</div>
</form>
Javascript
function imgchange(f) {
var filePath = $('#file').val();
var reader = new FileReader();
reader.onload = function (e) {
$('#imgs').attr('src',e.target.result);
};
reader.readAsDataURL(f.files[0]);
}
All browsers may not give you the exact path. You can use blob location like this:
function imgchange(event){ $("#imgs").attr('src',URL.createObjectURL(event.target.files[0])); }
In your input you can use onchange="imgchange(event)"
Here is a working JSFiddle
You can't do this unless you have uploaded the file to a server you can't show it in the browser, because the file goes to a virtualpath "C:/fakepath/" and you can't point any image to it. First you have to upload the image to server then provide the server path to the image.
try this:
<form action="#" method="post" enctype="multipart/form-data">
<center>
<table>
<tr>
<td colspan="2"><center><img id="imgs" width="170px" height="160px" ></img></center></td>
</tr>
<tr>
<td align="right"><b><label for="file">Filename:</label></b></td><td><input type="file" name="file" id="file" onchange="imgchange(event)"></td>
</tr>
</table>
</center>
<div class="buttons_save">
<button class="buttons_profile3" id="btnSubmit" >SAVE</button>
</div>
</form>
<script type="text/javascript">
function imgchange(e)
{
$("#imgs").attr('src',URL.createObjectURL(e.target.files[0]));
}
</script>
Very simple code to display image on browser
function imgchange(event){
$("#imgs").attr('src',URL.createObjectURL(event.target.files[0]));
}
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(260)
.height(100);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.