批量上传图片前展示

来源：互联网发布：星野竜一知乎编辑：程序博客网时间：2024/06/04 19:15

/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法:<div><img id="ImgPr" width="120" height="120" /></div><input type="file" id="up" />把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}); */jQuery.fn.extend({    uploadPreview : function(opts) {        var _self = this, _this = $(this);        opts = jQuery.extend({            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                }                // $("#" + opts.Img).attr('src',                // _self.getObjectURL(this.files[0]))                var show = $('#showArea');                for (i = 0; i < this.files.length; i++){                    var temp=this.files[i];                    $('<img>', {                        src : _self.getObjectURL(temp),                        alt : 'hello '+temp.name,                        title : 'just for test',                        click : function() {                            alert("hello");                        }                    }).css({                        border : '1px solid green',                        'border-radius': '50%',                        cursor : 'pointer',                        padding : '5px',                                                width : '100px',                        height : '100px',                                            }).appendTo(show);                }                //opts.Callback();            }        })    }});

前段页面

<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"><head th:fragment="header"><title th:text="上传"></title><link rel="stylesheet" th:href="@{css/main.css}" /><link rel="stylesheet" th:href="@{css/diyUpload.css}" /><link rel="stylesheet" th:href="@{css/webuploader.css}" /><script type="text/javascript" th:src="@{/js/jquery-3.2.0.min.js}" /><script type="text/javascript" th:src="@{/js/diyUpload.js}"></script><script>$(function() {$("#files").uploadPreview({Width : 120,Height : 120});});</script><style type="text/css">* {margin: 0;padding: 0;}</style></head><body><div style="width: 80%; text-align: center; position: relative;"><div><div style="width: 500px; margin: 0px auto;"><h2>图片上传预览演示</h2><div id="showArea"></div></div><form th:action="upload" enctype="multipart/form-data"th:method="post"><input th:type="file" id="files" name="files" multiple="multiple"accept="image/gif, image/jpeg" />   <input type="submit"  th:value="上传" /></form></div></div></body></html>

0 0