美文网首页
2018-02-23 上传图片兼容性

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

作者: IsYang | 来源:发表于2018-02-23 15:49 被阅读13次

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

        });

相关文章

网友评论

      本文标题:2018-02-23 上传图片兼容性

      本文链接:https://www.haomeiwen.com/subject/nryxxftx.html