web之前端获取上传图片并展示

　　1、html中经常存在图片上传的问题，但是后续的展示基本上是通过后台输出流的方式来呈现的。但是这样耗费的资源比较多。所以这里学习了一种前端直接展示图片的方式（供参考）。

　　2、html的编写方式比较简单

　　<img id="image" class="image"/>    
　　<input id="imageFile"  type="file" name="imageFile" accept="image/png,image/jpg,image/jpeg,image/bmp"/>

　　说明：实际代码中file的框可以直接做成按钮触发，file可以直接隐藏。image展示图片区域，可以自己设定长宽。

　　3、后台实现逻辑

　　　　　　　//图片加载
            $("#imageFile").change(function () {
                var file = this.files[0];
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件
                    reader.onloadend = function (e) {
                        //e.target.result就是最后的路径地址
                        $("#image").attr("src",e.target.result);
                    };
                }
            });

 

转载于:https://www.cnblogs.com/ll409546297/p/9660603.html