js读取本地图片并显示

时间：2022-08-12 15:40:08

抄自

http://blog.csdn.net/qiulei_21/article/details/52785191

js读取本地图片并显示

第一种方法比较好

版权声明：本文为博主原创文章，未经博主允许不得转载。

根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。

第一种方法：

<script type="text/JavaScript">

//图片显示插件

        (function ($) {

            $.imageFileVisible = function (options) {

                // 默认选项

                var defaults = {

                    //包裹图片的元素

                    wrapSelector: null,

                    //<input type=file />元素

                    fileSelector: null,

                    width: '100%',

                    height: 'auto',

                    errorMessage: "不是图片"

                };

                // Extend our default options with those provided.

                var opts = $.extend(defaults, options);

                $(opts.fileSelector).on("change", function () {

                    var file = this.files[0];

                    var imageType = /image.*/;

                    if (file.type.match(imageType)) {

                        var reader = new FileReader();

                        reader.onload = function () {

                            var img = new Image();

                            img.src = reader.result;

                            $(img).width(opts.width);

                            $(img).height(opts.height);

                            $(opts.wrapSelector).append(img);

                        };

                        reader.readAsDataURL(file);

                    } else {

                        alert(opts.errorMessage);

                    }

                });

            };

        })(jQuery);

        $(document).ready(function () {

            //图片显示插件

            $.imageFileVisible({ wrapSelector: "#image-wrap1",

                fileSelector: "#file1",

                width: 300,

                height: 300

            });

            $.imageFileVisible({ wrapSelector: "#image-wrap2",

                fileSelector: "#file2",

                width: 300,

                height: 300

            });

        });

 </script>

 <div id="ImportHead">

        <table border="0" class="frm" style="height: 35px; width: auto; padding-left: 5px;

            padding-top: 1px;">

            <tr style="width: 300px; height: 400px;">

                <th>

                    选择图1：

                </th>

                <td>

                    <input type="file" id="file1">

                    <div id="image-wrap1" style="width: 300px; height: 300px; border: solid 1px lightGray">

                    </div>

                </td>

                <th>

                    选择图2：

                </th>

                <td style="width: 300px;">

                    <input type="file" id="file2">

                    <div id="image-wrap2" style="width: 300px; height: 300px; border: solid 1px lightGray">

                    </div>

                </td>

            </tr>

            <tr>

                <td colspan="2" style="text-align: right">

                    <input type="submit" id="btnUpload" class="btnSearch" value="上传" />

                </td>

            </tr>

        </table>

    </div>

第二种方法：

<html>

<body>

 <img id="image"src=""/>

<br/>

 <input type="file"onchange="selectImage(this);"/>

<br/>

<script>

    var image = '';

    function selectImage(file) {

        if (!file.files || !file.files[0]) {

            return;

        }

        var reader = new FileReader();

        reader.onload = function (evt) {

            document.getElementById('image').src = evt.target.result;

            image = evt.target.result;

        }

        reader.readAsDataURL(file.files[0]);

    }

</script>

</body>

</html>

　　

相关文章