js读取本地图片并显示

抄自

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>