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