1. 程式人生 > >input file 實現圖片預覽效果

input file 實現圖片預覽效果

引入jq檔案

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

js程式碼

<script>
     $(function(){
         $('#file').change(function(){
             $filePath=URL.createObjectURL(this.files[0]);
             $('#img').attr('src',$filePath);
         })
     })
</script>

html程式碼

<div>
    <img src="" id="img" width="50px" height="50px" alt="">
    <input type="file" id="file" name="file">
</div>