首页草堂散记前端开发技术文档收藏

// 替换或追加参数
// 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);
}