点击图片弹出文件上传界面以及实现预览功能

实现效果:

1、点击上传按钮,弹出类似于资源管理器的界面。
2、选择完图片后,在img中预览。

效果图展示:

仅用于效果演示,具体界面美观效果自行设计。

具体代码如下:

(1)html代码:

<input type="file" style="width: 100px;height: 110px;" id="selectFile" onchange="selectImg(this.files);">
<img src="../../img/addimg.png" id="showImg" style="width: 100px;height: 110px;border: 1px solid #888888;">

(2)JavaScript代码:

/*选择图片*/
function selectImg(files) {
    var file = files[0];
    var fileReader = new FileReader();
    var imgPath = $('#selectFile').val();
    if (imgPath == '') {
        alert("没有选择图片");
        return;
    }
    var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
    if (strExtension != 'jpg' && strExtension != 'png' && strExtension != 'jpeg' &&
        strExtension != 'gif' && strExtension != 'bmp') {
        alert("请选择图片格式");
        return;
    }
    fileReader.onload = function () {
        $('#showImg').attr("src", this.result);
        imgRes = this.result; //图片资源
    }
    fileReader.readAsDataURL(file);
}

注意:以上获得的是图片,而不是图片的路径。


转载声明:本站文章无特别说明皆为原创,转载请注明:辛娜的个人博客原文链接

发表评论

电子邮件地址不会被公开。 必填项已用*标注