2018-02-23 上传图片兼容性

<input type="file" id="user-pic" />

<img id="viewImg" />


 //图片预览,兼容各个浏览器

        function previewImage(file) {

            var porImg = $(file),

                viewImg = $('#viewImg');

            var image = porImg.val();

            if (!/^\S*\.(?:png|jpe?g|bmp|gif)$/i.test(image)) {

                layer.msg('请选择图片~', {

                    shift: 6

                });

                porImg.val("");

                return false;

            }

            if (file["files"] && file["files"][0]) {

                var reader = new FileReader();

                reader.onload = function (evt) {

                    viewImg.attr({

                        src: evt.target.result

                    });

                }

                reader.readAsDataURL(file.files[0]);

            } else {

                var ieImageDom = document.createElement("div");

                var proIeImageDom = document.createElement("div");

                $(ieImageDom).css({

                    float: 'left',

                    position: 'relative',

                    overflow: 'hidden',

                    width: '100px',

                    height: '100px'

                }).attr({

                    "id": "view"

                });

                $(proIeImageDom).attr({

                    "id": porImg.attr("id")

                });

                porImg.parent().prepend(proIeImageDom);

                porImg.remove();

                file.select();

                path = document.selection.createRange().text;

                $(ieImageDom).css({

                    "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path +

                        "\")"

                });

            }

        }

        //图片上传预览

        $('#user-pic').change(function (e) {

            previewImage(this);

        });

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容