【JavaScript】上傳前預先讀取照片 (Client端、URL端)

小編在工作專案被客戶要求在檔案上傳功能，

選擇檔案後要即時預覽本機端或URL端的圖片。

<script type="text/javascript">
    //載入本機圖片
    function preview(file) {

        var prevDiv = document.getElementById('preview');

        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                prevDiv.innerHTML = '<img width="680px" src="' + evt.target.result + '" />';
                var aa = '<img src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
        }
        else {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }
    //載入URL圖片
    function preview_url() {
        var prevDiv = document.getElementById('preview');
        prevDiv.innerHTML = '<img width="680px" src=\'' + "http://www.cypress.com.tw/" + document.getElementById('WebFormView1_fileSmallPicture_A').value + ' \'">';
    }
</script>

<!-- 上傳前預先載入圖片 -->
<style type="text/css">
    #preview
    {
        /*width:80%;
                                    height:80%;*/
        width: 700px !important;
        width: 500px;
        max-width: 700px;
        height: 500px !important;
        height: 500px;
        max-height: 500px;
        border: 1px dashed #d1d0d0;
        text-align: center;
    }
</style>

<div id="preview">圖片顯示區</div>