本人是新开始写博客的，总结能力不强，直接贴代码吧，很容易懂

 

 

引入：项目中经常需要当用户选择照片后立刻把显示出来，本文就是解决这个需求的，插件显示的图片是jQuery画的，此时不涉及上传

1.前端代码

<script src="jquery-1.11.1.min.js"></script>
<script src="image-file-visible.js"></script>
<script>
    $(document).ready(function() {
        //图片显示插件
        $.imageFileVisible({
            wrapSelector : "#image-wrap1",
            fileSelector : "#file1",
            width : 300,
            height : 150
        });
        //图片显示插件
        $.imageFileVisible({
            wrapSelector : "#image-wrap2",
            fileSelector : "#file2",
            width : 300,
            height : 150
        });
    });
</script>
</head>
<body>
    <form action="FileUpLoad" enctype="multipart/form-data" method="post">
        上传文件：<input type="file" id="file1" name="file1"><div id="image-wrap1"></div><br /> 
        上传文件： <input type="file" id="file2" name="file2"><div id="image-wrap2"></div><br />
         <input type="submit" value="提交" />

    </form>

 

 

 

ps:   image-file-visible.js源码（比较简单，根据自己想要的效果可以适当修改）

(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];
            if(typeof(file)){
                $(opts.wrapSelector).html("");
            }
            var imageType = /image.*/;
            if (file.type.match(imageType)) {
                var reader = new FileReader();
                reader.onload = function() {
                    var img = new Image();
                    img.src = reader.result;//图片的base64位编码
                    $(img).width(opts.width);
                    $(img).height(opts.height);
                    $(opts.wrapSelector).html(img);
                };
                reader.readAsDataURL(file);
            } else {
                $(opts.wrapSelector).html("选择的不是图片，将不会上传！");
//                alert(opts.errorMessage);
//                var file=$(opts.fileSelector);
//                file.after(file.clone().val("")); 
//                file.remove(); 

            }
        });
    };
})(jQuery);