码迷,mamicode.com
首页 > Web开发 > 详细

图片上传预览

时间:2018-05-21 18:01:59      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:上传   col   targe   image   att   res   实用   tar   end   

图片上传预览方法:

//上传图片
function imgFileFunc(source) {
    // 文件流
    var file = source.files[0];
    var fileType = file.type
    var dom1 = ‘.files_img1‘
    // 判断上传的文件格式
    if(fileType.indexOf(‘image/‘)<0){
        // 以下代码是对如果不是这种格式的代码进行处理
        $(‘#tipCont‘).html(‘请选择jpg/png格式的图片‘);
        $(‘#tipPop‘).show();
        setTimeout(function () {
            $(‘#tipPop‘).hide();
        },1500)
    }else{
        // 对上传的图片进行处理
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                // 这个地方获取的是你上传的时候的图片的路径
                bigBgSrc = e.target.result;
                // 下面是对你获取到上传图片的本地路径后的一系列操作,应各自项目需求为准
                $(dom1).attr("src",bigBgSrc).show();
                $(‘#yyzz‘).hide();
                $(‘.files_img‘).show(); 
            };
            fr.readAsDataURL(file);
        }
    }
}

 

  html代码:

<input onchange=‘imgFileFunc(this)‘ type="file" id="file1"> 

 

很简单的一个方法,也很实用。希望可以对自己也好对大家也好都会有帮助~~~~~~~~~

图片上传预览

标签:上传   col   targe   image   att   res   实用   tar   end   

原文地址:https://www.cnblogs.com/luozhixiang/p/9068295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!