input type=file 選擇圖片而且實現預覽效果

時間 2019-11-16

標籤 input type file 選擇圖片而且實現預覽效果简体版

原文原文鏈接

經過<input />標籤，給它指定type類型爲file，可提供文件上傳；css

accept：可選擇上傳類型，如：只要傳圖片，且不限制圖片格式，爲image/*；數組

multiple：規定是否能夠選擇多個文件；函數

規定只可上傳圖片，且能夠選擇多個文件

<input type="file" accept="image/*" multiple="multiple"/>

固然，直接一個input type=file 只能選擇上傳的文件/資源，若是咱們須要在選擇圖片以後，在當前頁面實現預覽效果，那麼咱們能夠以下方式來實現編碼

HTML代碼

<body>
    <div id="box">
        <img id="imgshow" src="" alt=""/>
    </div>
    <div id="pox">
        <input id="filed" type="file" accept="image/*"/>
    </div>
</body>

css樣式文件

  <style>
        #box{
            width: 300px;
            height: 300px;
            border: 2px solid #858585;
        }
        #imgshow{
            width: 100%;
            height: 100%;
        }
        #pox{
            width: 70px;
            height: 24px;
            overflow: hidden;
        }
    </style>

JS代碼

<script>
        //在input file內容改變的時候觸發事件
        $('#filed').change(function(){
        //獲取input file的files文件數組;
        //$('#filed')獲取的是jQuery對象，.get(0)轉爲原生對象;
        //這邊默認只能選一個，可是存放形式仍然是數組，因此取第一個元素使用[0];
            var file = $('#filed').get(0).files[0];
        //建立用來讀取此文件的對象
            var reader = new FileReader();
        //使用該對象讀取file文件
            reader.readAsDataURL(file);
        //讀取文件成功後執行的方法函數
            reader.onload=function(e){
        //讀取成功後返回的一個參數e，整個的一個進度事件
                console.log(e);
        //選擇所要顯示圖片的img，要賦值給img的src就是e中target下result裏面
        //的base64編碼格式的地址
                $('#imgshow').get(0).src = e.target.result;
            }
        })
</script>

*以上js代碼中有使用到jQuery，所以要引入jQuery文件spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。