• 当前url替换或追加参数值

    发表于 2020-09-03 20:06:33   |   下载附件
    url替换url参数地址栏参数追加地址栏参数替换
    // 替换或追加参数
    // orgUrl 地址
    // paramName 参数名
    // replaceWith 参数值
    var replaceParamVal = function(orgUrl,paramName,replaceWith){
        var reg = new RegExp('('+ paramName +'=)([^&]*)','gi'),
            has = orgUrl.indexOf(paramName);
            if(has<=0){ 
                // 不存在改参数
                var hasQuestion = orgUrl.indexOf("?");
                if(hasQuestion>0){
                  orgUrl = orgUrl+"&" +(paramName +'=' +replaceWith);
                }else{
                  orgUrl = orgUrl+"?" +(paramName +'=' +replaceWith);
                }
            }else{
                // 存在该参数
                orgUrl = orgUrl.replace(reg,paramName+'='+replaceWith);
            }   
        return orgUrl; 
    };
  • 图片裁剪插件(github上最多用户使用完美版)

    发表于 2020-07-23 17:05:29   |   下载附件
    Cropper.js图片裁剪图片上传独立裁剪插件
  • 通过formData上传图片及文件流

    发表于 2020-07-17 13:46:20   |   下载附件
    formData图片上传上传文件上传formData方式上传
    // 图片上传
    $("#imghand").on('change',function(e) {
    	var me = $(this).parent();
        var handId = $(this).attr("id");
        var files = e.target.files;
        files && upLoadMethod(files,handId,me)
    })
    
    function upLoadMethod(file, domId, box) {
    	if(!file[0]){
    		return false;
    	}
        var formData = new FormData();
        formData.append('file', file[0]);
        t.http({
        	cache: false, //上传文件不需要缓存
            type: "POST",
            url: "",
            data: formData,
            dataType:"json",
            timeout:1000*5,
            contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
            processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
            success: function (ret) {
            	// 略……
            },
            error: function (err) {
    
            }
        });
    }
  • jquery 图片上传裁剪插件

    发表于 2020-07-17 11:50:06   |   下载附件
    图片裁剪Jquery图片裁剪图片裁剪上传图片本地上传裁剪上传裁剪

    使用案例代码,请在上方下载

  • jquery checkall 插件

    发表于 2020-06-18 19:28:31   |   下载附件
    checkAllJquery 全选与不全选全选插件全选反选
    <form>
      <table>
        <thead>
          <tr>
            <th><label><input type="checkbox" data-toggle="checkall"></label></th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
            <tr>
              <td><input type="checkbox" name="" value=""></td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            ....
          </tbody>
      </table>
    </form>

  • 即时图片上传函数,获取图片地址显示图片

    发表于 2020-06-18 18:58:44   |   下载附件
    图片上传upload imagenew FormData();ajax 图片上传ajax upload
    即时上传图片函数备份,有某些时候,图片是即时上传至服务器,获取图片地址在前端显示
  • 读取本地文件流

    发表于 2020-06-10 16:47:34   |   下载附件
    读取文件流上传上传本地图片本地图片预览本地图片上传预览
    // 读取图片函数
    var readImgFileUrl = function (me, option) {
        var defaultOption = {
            // 开始读取图片
            loadStart: function (e) {
            },
            // 读取完成
            complete: function (r) {
            },
            // 读取出错
            error: function (e) {
            }
        }
        var opts = $.extend(defaultOption, option);
        // 读取图片数据 并传入回调
        var imgObject;
        if (!me.files.length) {
            return;
        } else {
            if (me.files[0].type == 'image/jpeg' || me.files[0].type == 'image/jpg' || me.files[0].type == 'image/png') {
                imgObject = me.files[0];
            } else {
                alert("此图片格式不正确!");
                return;
            }
        }
        // 图片的正准方向
        // var orientation;
    
        // EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
        // EXIF.getData(imgObject,function(){
        //     orientation = EXIF.getTag(this,'Orientation');
        // });
    
        // HTML5 用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据
        var fileReader = new FileReader();
        // 开始读取
        fileReader.onprogress = function (e) {
            // 开始读取
            console.log((e.loaded / e.total * 100).toFixed() + "%");
        };
        // 读取完成
        fileReader.onload = function (e) {
            //这里可以使用校正后的图片data了
            opts.complete(data);
        };
        // 读取出错
        fileReader.onerror = function (e) {
            // alert("图片加载失败");
            opts.error(this, e);
        };
        // 读取文件内容
        fileReader.readAsDataURL(imgObject);
        // 开始加载的回调函数
        opts.loadStart.call(fileReader, imgObject);
    }
  • 利用JS本地生成图片,并保存多个图片至本地

    发表于 2020-06-10 09:29:05   |   下载附件
    html2canvascanvas2imagejszipFileSaver浏览器生成图片方案浏览器保存文件方案

    HTML2canvas 生成图片:(下面使用方式源码)

    http://html2canvas.hertzen.com/

    https://github.com/niklasvh/html2canvas

    JSzip 依赖 下载图片文件包:(下载压缩包源码)

    https://stuk.github.io/jszip/

    https://stuk.github.io/jszip/documentation/examples/download-zip-file.html

  • 平缓渐变样式,放大缩小等

    发表于 2020-05-14 19:25:45   |   下载附件
    平缓渐变样式CSS3动画transition 渐变
    // LESS 渐变变化
    ._transition(){
    	transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
    }
    
    // LESS 图片渐变放大样式
    img { 
    	width: 100%; height: 158px; overflow:hidden; border-radius:5px 5px 0 0; ._transition();
    	&:hover {
    		transform: scale(1.1); -ms-transform: scale(1.1); ._transition();
    	}
    }
  • 手机端输入框有时弹不出来,需要添加事件绑定,让窗口变化时,输入区强行滚动到视图区

    发表于 2020-05-14 19:17:07   |   下载附件
    手机输入框不出现手机输入区滚动到视图区手机端输入区手机端 input手机端评论框手机输入区显示
    // Function
    // 手机端输入框有时弹不出来,需要添加事件绑定,让窗口变化时,输入区强行滚动到视图区
    var keyboard = function(domEvent) {
        // ISO手机处理
        this.isReset = true; // 是否归位
        this.focusinHandler = function() {
            this.isReset = false; // 聚焦时键盘弹出,焦点在输入框之间切换时,会先触发上一个输入框的失焦事件,再触发下一个输入框的聚焦事件
        };
        this.focusoutHandler = function() {
            this.isReset = true;
            setTimeout(function() {
                // 当焦点在弹出层的输入框之间切换时先不归位
                if (this.isReset) {
                    window.scroll(0, 0); // 确定延时后没有聚焦下一元素,是由收起键盘引起的失焦,则强制让页面归位
                }
            }, 30);
        };
        // Android 手机处理
        this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
        this.resizeHandler = function() {
            var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
            // 当前获得焦点的元素
            var activeElement = document.activeElement;
            if (resizeHeight < this.originHeight) {
                // 键盘弹起后逻辑
                if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
                    setTimeout(function() {
                        // 让当前的元素滚动到浏览器窗口的可视区域内。
                        // activeElement.scrollIntoView({
                        //     block: 'center'
                        // });
                        activeElement.scrollIntoViewIfNeeded;
                    }, 0)
                }
            } else {
                // 键盘收起后逻辑
            }
        };
        // 解绑事件
        this.unmount = function() {
            if (this.focusinHandler && this.focusoutHandler) {
                domEvent.removeEventListener('focusin', this.focusinHandler);
                domEvent.removeEventListener('focusout', this.focusoutHandler);
            }
            if (this.resizeHandler) {
                window.removeEventListener('resize', this.resizeHandler);
            }
        }
        // 入口函数
        this.init = function(){
            // 系统判断
            var ua = window.navigator.userAgent.toLocaleLowerCase();
            var isIOS = /iphone|ipad|ipod/.test(ua);
            var isAndroid = /android/.test(ua);
            if (isIOS) {
                // console.info('isIOS')
                // 上面 IOS 处理
                domEvent.addEventListener('focus', this.focusinHandler);
                domEvent.addEventListener('blur', this.focusoutHandler);
            }
            if (isAndroid) {
                // 上面 Android 处理
                // console.info('isAndroid')
                window.addEventListener('resize', this.resizeHandler);
            }
        }
        return this;
    };
    
    // Function Call 
    // 发送消息后,窗口自适应调整
    if($('.inputArea').length){
        keyboard($('.inputArea').get(0)).init();
    }
每页显示10条,当前为第1页,总页数为19页