黑马程序员技术交流社区

标题: 【广州PHP】简单实现图片上传预览 [打印本页]

作者: bingwei213    时间: 2018-10-27 14:59
标题: 【广州PHP】简单实现图片上传预览
本帖最后由 bingwei213 于 2018-10-27 15:00 编辑

简单实现图片上传预览
第一:引入placeImage.js。
第二:对应的id。

第三:效果如下:


placeImage.js代码:
[JavaScript] 纯文本查看 复制代码

function change() {
        var pic = document.getElementById("preview"),
            file = document.getElementById("f");
        var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
     // gif在IE浏览器暂时无法显示
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'&&ext!='gif'){
         alert("图片的格式必须为png或者jpg或者jpeg格式或者gif格式!");
                 return;
     }
         var isIE = navigator.userAgent.match(/MSIE/)!= null,
                 isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

         if(isIE) {
                file.select();
                var reallocalpath = document.selection.createRange().text;

                // IE6浏览器设置img的src为本地路径可以直接显示图片
         if (isIE6) {
                        pic.src = reallocalpath;
                 }else {
                        // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
                 }
         }else {
                html5Reader(file);
         }
}

function html5Reader(file){
     var file = file.files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function(e){
         var pic = document.getElementById("preview");
         pic.src=this.result;
     }
}







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2