获取完整的图像路径并使用javascript放入img src

Question

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>

Answer 1

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]));
});

Answer 2

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]);           
        }

Answer 3

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

Answer 4

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.

Answer 5

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>

Answer 6

Very simple code to display image on browser

function imgchange(event){
    $("#imgs").attr('src',URL.createObjectURL(event.target.files[0]));
}

Answer 7

<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>