图片上传预览

图片上传预览方法:

//上传图片
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"> 

 

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

posted @ 2018-05-21 17:19  誌翔  阅读(214)  评论(0编辑  收藏  举报