SOURCE

console 命令行工具 X clear

                    
>
console
 
//图片显示插件
        (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
            });
        }); 
 <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>

    

本项目引用的自定义外部资源