技术 思绪 摘录 旅行
利用js实现前端预览图片,首先我想表达一下我的心情,我觉得javascript是相当厉害的语言,一点都不逊色于某些后端语言,强大,轻便是他的特点。

一、写一个file控件,用于选择文件;

    input:id="file1" type="file"

二、写一个img控件,用于显示图片; 

    img:id="img1" src=""  width="600" 

三、引入jquery ;

四、写我们的js代码;

    $(function () {

           // var filetype = "jpg、gif、bmp、png、jpeg";

            $("#file1").change(function () {

                var file = this.files[0];

                var fileType = (file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length)).toLowerCase();

                if ("jpg、gif、bmp、png、jpeg".indexOf(fileType) < 0) {

                    $("#img1").attr("src", "");

                    alert("请选择图片文件");

                    return;

                }

                if (this.files && file) {

                    var reader = new FileReader();

                    reader.onload = function (e) {

                        $("#img1").attr("src",e.target.result);

                    }

                    reader.readAsDataURL(file);

                }

            });

    });



CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫