• 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,
                         '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",
                     300,
                    height: 300
                });
                $.imageFileVisible({ wrapSelector: "#image-wrap2",
                    fileSelector: "#file2",
                     300,
                    height: 300
                });
            });
     </script>
     <div id="ImportHead">
            <table border="0" class="frm" style="height: 35px;  auto; padding-left: 5px;
                padding-top: 1px;">
                <tr style=" 300px; height: 400px;">
                    <th>
                        选择图1:
                    </th>
                    <td>
                        <input type="file" id="file1">
                        <div id="image-wrap1" style=" 300px; height: 300px; border: solid 1px lightGray">
                        </div>
                    </td>
                    <th>
                        选择图2:
                    </th>
                    <td style=" 300px;">
                        <input type="file" id="file2">
                        <div id="image-wrap2" style=" 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>
  • 相关阅读:
    尚观寻求帮助
    linux软链接与硬连接
    linux常用命令(三)
    zend 动作控制器
    zend 路由
    ZF组件功能简介
    zend_controller
    linux常用命令(一)
    练习1
    练习1感受:
  • 原文地址:https://www.cnblogs.com/jcz1206/p/6532667.html
Copyright © 2020-2023  润新知