上转图片并预览

淩亂°似流年 2022-06-07 10:12 282阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>上传图片并预览</title>
        <script src="uploadPreview.min.js" type="text/javascript"></script>
        <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
        <script> window.onload = function () { new uploadPreview({ UpBtn: "up_img1", DivShow: "imgdiv1", ImgShow: "imgShow1" }); new uploadPreview({ UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2" }); new uploadPreview({ UpBtn: "up_img3", DivShow: "imgdiv3", ImgShow: "imgShow3" }); $("#imgdiv2").hide(); $("#imgdiv3").hide(); $("#urldiv1").hide(); $("#urldiv2").hide(); $("#urldiv3").hide(); } </script>
        <script type="text/javascript"> function upDivCheck_Js(){ if($("#up_img1").val() != ""){ $("#imgdiv2").show(); $("#urldiv1").show(); } if($("#up_img2").val() != ""){ $("#imgdiv3").show(); $("#urldiv2").show(); } if($("#up_img3").val() != ""){ $("#urldiv3").show(); } } function deleteBtn_Js(imgNo){ $('#imgShow'+imgNo).attr("src",""); $('#up_img'+imgNo).val(""); } $(function(){ $('#up_img1').on('change',function(){ upDivCheck_Js(); }); $('#up_img2').on('change',function(){ upDivCheck_Js(); }); $('#up_img3').on('change',function(){ upDivCheck_Js(); }); $(".imgdiv").mouseenter(function () { $(this).find(".delete").show(); }); $(".imgdiv").mouseleave(function () { $(this).find(".delete").hide(); }); }) </script>
    </head>
    <style> .imgdiv{ height: 100px; background: url(upBtn.png); width: 100px; position:relative; } .imgdiv .delete{ position: absolute; top: 0px; right: 0px; width: 10px; height: 10px; display: none; } .inputstyle{ width: 100px; height: 100px; cursor: pointer; font-size: 30px; outline: medium none; position: absolute; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; left:0px; top: 0px; } </style>
    <body>
    
            <div id="imgdiv1" class="imgdiv">
                <img id="imgShow1" width="100" height="100" />
                <input type="file" id="up_img1" class="inputstyle"/>
                <a href="#" onclick="deleteBtn_Js(1)">
                    <img src="deleteBtn.png" class="delete" />
                </a>
            </div>
            <div id="urldiv1">
                <label>链接： </label><input id="url1" name="url1" maxlength ="100"/>
            </div>  
        <br/>
            <div id="imgdiv2" class="imgdiv">
                <img id="imgShow2" width="100" height="100" />
                <input type="file" id="up_img2"class="inputstyle"/>
                <a href="#" onclick="deleteBtn_Js(2)">
                    <img src="deleteBtn.png" class="delete" />
                </a>
            </div>
            <div id="urldiv2">
                <label>链接： </label><input id="url2" name="url2" maxlength ="100"/>
            </div>  
        <br/>
            <div id="imgdiv3" class="imgdiv">
                <img id="imgShow3" width="100" height="100" />
                <input type="file" id="up_img3"class="inputstyle"/>
                <a href="#" onclick="deleteBtn_Js(3)">
                    <img src="deleteBtn.png" class="delete" />
                </a>
            </div>
            <div id="urldiv3">
                <label>链接： </label><input id="url3" name="url3" maxlength ="100"/>
            </div>
        <br/>
        Hello World
    </body>
    </html>

这里用到了网上的一个JS文件(上传图片并显示)，我进行了一些改写，增加了图片像素尺寸的判断控制

/* *插件作者:周祥 *插件介绍:图片上传本地预览插件 *插件网站:http://jquery.decadework.com *作 者QQ:200592114 */
    var uploadPreview = function(setting) {
        var _self = this;
        _self.IsNull = function(value) {
            if (typeof(value) == "function") {
                return false;
            }
            if (value == undefined || value == null || value == "" || value.length == 0) {
                return true
            };
            return false;
        };
        _self.DefautlSetting = {
            UpBtn: "",
            DivShow: "",
            ImgShow: "",
            Width: 100,
            Height: 100,
            ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
            ErrMsg: "文件格式错误",
            callback: function() {}
        };
        _self.Setting = {
            UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn: setting.UpBtn,
            DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow: setting.DivShow,
            ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow: setting.ImgShow,
            Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width: setting.Width,
            Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height: setting.Height,
            ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType: setting.ImgType,
            ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg: setting.ErrMsg,
            callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback: setting.callback
        };
        _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;
        };
        _self.Bind = function() {
            document.getElementById(_self.Setting.UpBtn).onchange = function() {
                if (this.value) {
    
                    if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert(_self.Setting.ErrMsg);
                        this.value = "";
                        return false
                    };
    
                        var _URL = window.URL || window.webkitURL;
                        var sizeimg = new Image();
                        var ImgShowSrc = _URL.createObjectURL(this.files[0]);
                        sizeimg.src = ImgShowSrc;
                        sizeimg.onload = function(){
                            if(sizeimg.width != 750 && sizeimg.height != 340){
                                sizeFlag = false;
                                alert("图片大小不符合要求");
                                document.getElementById(_self.Setting.UpBtn).value = "";
                                return false
                            }else{
                                document.getElementById(_self.Setting.ImgShow).src = ImgShowSrc;
                            };
                            _self.Setting.callback();
                        }
    
    
                }
            }
        };
        _self.Bind();
    
    }

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220607/382e64e987a642da818dd91355658d9b.png