easyui 實現圖片上傳預覽

圖片預覽功能

首先在頁面添加兩個tr，一個用來選擇文件，一個用來實現預覽

 <tr id="chooseFile_tr">
                <td class="td-marked">圖片：</td>
                <td class="td-content" id="file_td">
                    <div>
                        <input id="chooseFile" name="file" style="width:300px" data-options="required:true"> //文件選擇框
                        <p style="color: #c6c6c6;margin-top: 5px;">請選擇一張圖片,分辨率爲1920*450</p>
                    </div>
                </td>
            </tr>
            <tr id="preview_tr">
                <td class="td-marked">圖片預覽</td>
                <td class="td-content">
                    <div id="Imgdiv" style="display: none">
                        <img id="Img" width="200px" height="200px"/>
                    </div>
            </tr>

在js中給選擇框綁定change事件

$('#chooseFile').filebox({
            buttonText: '選擇文件',
            buttonAlign: 'right',
            accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png",
            onChange: function (e) {
                change_photo()
            }
        })

function change_photo() {
    PreviewImage($("input[name='file']")[0], 'Img', 'Imgdiv');//傳入綁定的文本框，圖片、圖片div
}

 //焦點圖片預覽
function PreviewImage(fileObj,imgPreviewId,divPreviewId) {
        var allowExtention = ".jpg,.bmp,.gif,.jpeg,.png";//允許上傳文件的後綴名document.getElementById("hfAllowPicSuffix").value;
        var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
        if (allowExtention.indexOf(extention) > -1) {
            if (fileObj.files) {//HTML5實現預覽，兼容chrome、火狐7+等
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var tempDivPreview=document.getElementById(divPreviewId);
                        tempDivPreview.style.display="block";
                        document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                    }
                    if(fileObj.files[0]) {
                        reader.readAsDataURL(fileObj.files[0]);
                    }
                }
            } else {
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            }
        } else {
            alert("僅支持" + allowExtention + "爲後綴名的文件!");
            fileObj.value = "";//清空選中文件
            fileObj.outerHTML = fileObj.outerHTML;
        }
}

至此，圖片預覽就可以實現啦，實現文件上傳訪問後臺接口即可

 

參考：https://blog.csdn.net/nvxiaq/article/details/77740516