如何在input标签选择文件并直接显示本地图片

在网页中，有时我们需要让用户能够选择本地的图片文件，并且能够直接在页面上显示出来。使用filereader可以实现这个功能，下面是具体的步骤。

第一步：创建HTML结构

首先，在页面中引入jQuery库，并添加一个文件选择的input元素以及一个用于显示结果的div。

lt;script src""gt;lt;/scriptgt;
lt;input type"file" id"file"gt;
lt;div id"image-wrap"gt;lt;/divgt;

第二步：创建jQuery插件image-file-visible.js

为了方便以后的使用，我们可以创建一个jQuery插件来处理图片显示的逻辑。

(function($) {
    $.imageFileVisible  function(options) {
        // 默认选项
        var defaults  {
            // 包裹图片的元素
            wrapSelector: null,
            // input typefile元素
            fileSelector: null,
            width: '100%',
            height: 'auto',
            errorMessage: "不是图片"
        };
        // Extend our default options with those provided.
        var opts  $.extend(defaults, options);
        $().on("change", function(){
            var file  [0];
            var imageType  /image.*/;
            if ((imageType)) {
                var reader  new FileReader();
                  function(){
                    var img  new Image();
                      ;
                    $(img).width(opts.width);
                    $(img).height(opts.height);
                    $( opts.wrapSelector ).append(img);
                };
                (file);
            } else {
                alert();
            }
        });
    };
})(jQuery);

第三步：完整的HTML代码

下面是完整的HTML代码：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
    lt;meta charset"utf-8"gt;
    lt;titlegt;input标签选择file直接读取本地图片并显示lt;/titlegt;
    lt;script src""gt;lt;/scriptgt;
    lt;script src"image-file-visible.js"gt;lt;/scriptgt;
    lt;scriptgt;
        $(document).ready(function(){
            // 图片显示插件
            $.imageFileVisible({
                wrapSelector: "image-wrap",
                fileSelector: "file",
                width: 100,
                height: 50
            });
        });
    lt;/scriptgt;
lt;/headgt;
lt;bodygt;
    lt;input type"file" id"file"gt;
    lt;div id"image-wrap"gt;lt;/divgt;
lt;/bodygt;
lt;/htmlgt;

通过以上三个步骤，我们就可以在网页中使用input标签选择本地文件，并且直接显示出图片了。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。