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);

                    };

                }

            });

巴特西

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

最新文章

热门文章