Question

我想获取我选择的图像的完整路径，并且在我选择图像后出现问题，没有图像出现。

请帮助我：）

这是我的代码。

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

试试这个：

以下是HTML代码： -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
    <br>
<img src="" width="200" style="display:none;" />

这是JS： -

$('#i_file').change( function(event) {
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
});

Answer 2

试试这个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

所有浏览器都可能无法为您提供准确的路径。你可以像这样使用blob位置：

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

在您的输入中，您可以使用onchange="imgchange(event)"

这是一个有效的JSFiddle

Answer 4

除非您已将文件上传到无法在浏览器中显示的服务器，否则无法执行此操作，因为该文件将转到虚拟路径“C：/ fakepath /”并且您无法指向任何图像它。首先，您必须将图像上传到服务器，然后提供图像的服务器路径。

Answer 5

试试这个：

 <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

在浏览器上显示图像的非常简单的代码

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

Answer 7

[
    {
        "Id": 57571,
        "Price": 1745.0,
        "DateAdded": "2018-12-01T00:00:00"
    },
    {
        "Id": 67537,
        "Price": 1695.0,
        "DateAdded": "2018-09-24T00:00:00"
    },
    {
        "Id": 80042,
        "Price": 1645.0,
        "DateAdded": "2019-03-24T00:00:00"
    },
    {
        "Id": 155866,
        "Price": 1545.0,
        "DateAdded": "2019-04-24T00:00:00"
    }
]

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

7 个答案: