如何上传多张图片

Html

Css

$(function() {
    /*多图上传*/
    jQuery.fn.extend({
        uploadPreview: function(opts) {
            var _self = this,
                _this = $(this);
            opts = jQuery.extend({
                Img: "ImgPr",
                Width: 100,
                Height: 100,
                ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                Callback: function() {}
            }, opts || {});
            _self.getObjectURL = function(file) {
                var url = null;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(file)
                } else if (window.URL != undefined) {
                    url = window.URL.createObjectURL(file)
                } else if (window.webkitURL != undefined) {
                    url = window.webkitURL.createObjectURL(file)
                }
                return url
            };
            _this.change(function() {
                if (this.value) {
                    if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
                        this.value = "";
                        return false
                    }
                    if ($.browser.msie) {
                        try {
                            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                        } catch (e) {
                            var src = "";
                            var obj = $("#" + opts.Img);
                            var div = obj.parent("div")[0];
                            _self.select();
                            if (top != self) {
                                window.parent.document.body.focus()
                            } else {
                                _self.blur()
                            }
                            src = document.selection.createRange().text;
                            document.selection.empty();
                            obj.hide();
                            obj.parent("div").css({
                                'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
                                'width': opts.Width + 'px',
                                'height': opts.Height + 'px'
                            });
                            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
                        }
                    } else {
                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                    }
                    opts.Callback()
                }
            })
        }
    });

$("#up").uploadPreview({
        Img: "ImgPr",
        Width: 120,
        Height: 120
    });

})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.7.2

立即下载

如何上传多张图片



代码描述：主要通过html的input标签选择上传多张图片

2

最新

发表评论全部评论

暂时没有评论！

哎呦我就是修改昵称吖0

2017/12/21 11:22:12

对，安卓浏览器不兼容multiple属性
回复

冥想舒畅0

2017/6/22 22:48:36

安卓的微信浏览器未必能兼容。
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?重??

相关代码

如何上传多张图片

最新