java cropper_layui剪裁插件cropper一个页面调用多次问题解决

问题：在一个页面调用多个cropper剪裁插件时，我们会发现虽然每个id我们都声明了，但当我们点击相应的区域时，cropper剪裁区域会弹出来，但选好后点击保存，我们会发现剪裁图片只会出现在最后一个声明的id那里。虽然我们可以在每个区域那里设置一个点击事件，通过改变相应的之来告诉cropper图片显示在那个位置，但那样很麻烦，代码重复利用率很低。

解决方法如下：

var uploadList = new Array();

uploadList.push({"name": "upload", "uploadCount": 0, "url": ""});

uploadList.push({"name": "upload2", "uploadCount": 0, "url": ""});

uploadList.push({"name": "upload3", "uploadCount": 0, "url": ""});

function layuiInit() {

layui.use(['element', 'form', 'layer', 'upload'], function(){

var element = layui.element;

var form = layui.form;

var layer = layui.layer;

var upload = layui.upload;

upload.render({

elem: 'upload, #upload2, #upload3',

url: path + "fileManager/uploadImg",// 上传接口

done: function(res) {

$this = this.item;

var name = $this.attr('id');

var obj = uploadList.filter((u) => {

return u.name == name;

})[0];

// 删除上次上传但还未提交的图片

if(obj.uploadCount > 0) {

$.ajax({

type: "get",

url: path + "fileManager/deletePicture?url=" + obj.url,

contentType: "application/x-www-form-urlencoded;charset=utf-8",

success: function() {}

});

}

// 赋值

$this.attr("value", res[0]);

// 回显预览图片

$this.css({

"background-image": "url(" + path + "fileManager/showPicture?url="

+ res[0] +")"

});

// 拼接(功能需求：upload只有一张图片，不需要拼接，其它的需要)

var $input = $this.parent().prevAll('input');

var value = $input.val();

if(name == 'upload' || value == "") {

$input.val(res[0]);

} else {

$input.val($input.val() + "," + res[0] + ",");

}

obj.uploadCount++;

obj.url = res[0];

error: function(){}

});

}

传送门：

java cropper_layui剪裁插件cropper一个页面调用多次问题解决相关推荐

一个页面多个swiper问题解决
一个页面多个swiper问题解决参考文章: (1)一个页面多个swiper问题解决 (2)https://www.cnblogs.com/DreamerLeaf/p/10086882.html 备忘 ...
java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
一个页面调用另一个页面的方法
一.新建一个common.js 里面可以只写 import Vue from 'vue' export default new Vue 二.在调用的页面先引入刚写的js import common ...
java百度地图插件下载地址_调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
一个java的小型WEB项目一个页面（IDEA + 前后端代码）--一些基本配置分为三篇（第1篇）
第一次写这种项目的一些思路,可能说有哪些描述有误或不清晰,但我会尽力写全一个整体的思路,项目分为了三部分(1:我的一些准备, 2:后端代码, 3:jsp前端代码) 我会在第二,第三篇将前后端的原码都粘 ...
uniapp返回上一页面调用上一页面方法
<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title= ...
html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...
开发谷歌浏览器插件会上瘾，搞了一个JSONViewer，一个页面格式化多条JSON，提升工作效率...
最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...

java cropper_layui剪裁插件cropper一个页面调用多次问题解决

java cropper_layui剪裁插件cropper一个页面调用多次问题解决相关推荐

最新文章

热门文章