小編在工作專案被客戶要求在檔案上傳功能,
選擇檔案後要即時預覽本機端或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>