前端JS特效第50集:zyupload图片上传

zyupload图片上传,先来看看效果:

部分核心的代码如下(全部代码在文章末尾):

var operimg_id;
var zoom_rate=100;
var zoom_timeout;
function rotateimg(){var smallImg=$("#"+operimg_id);var num=smallImg.attr('curr_rotate');if(num==null){num=0;}num=parseInt(num);num +=1;smallImg.attr('curr_rotate',num);$("#show_img").rotate({angle:90*num});smallImg.rotate({angle:90*num});
}function createOpenBox(){if($('#operimg_box').length==0){var html = '    <div class="operimg_box" id="operimg_box">';html += '       <img id="show_img" src="" onclick="get_imgsize()" />';html += '       <span class="set_img percent_img" id="zoom_show" >percent</span>';html += '       <span class="set_img zoomin" onclick="zoomIn()"></span>';html += '       <span class="set_img zoomout" onclick="zoomOut()"></span>';html += '       <span class="set_img ratateimg" id="btn_rotateimg" onclick="rotateimg()"></span>';html += '       <span class="set_img close_img" id="delimg"></span>';html += '       <span class="set_img arrowleft" onclick="prevImg()"></span>';html += '       <span class="set_img arrowright" onclick="nextImg()"></span>';html += '       <span class="set_img operarea_box"></span>';html += '   </div><div class="clearboth"></div><div id="mask_bg">dfdfdfdfdfd是打发第三方</div>';$('body').append(html);         }
}
function get_imgsize(){var img_size=$("#show_img").width();//alert(img_size);
}function setNewIndex(isNext) {var imgs = $('#preview').find('img[class="upload_image"]');var imgCount = imgs.length;var currIndex=0;for(var i=0;i<imgCount;i++){if($(imgs[i]).attr('id')==operimg_id){currIndex = i;break;}}if (isNext) {currIndex += 1;if (currIndex >= imgCount) {currIndex = 0;}} else {currIndex -= 1;if (currIndex < 0) {currIndex  =imgCount-1;}        }return $(imgs[currIndex]).attr('id').replace('uploadImage_','');
}
function nextImg() {var index = setNewIndex(true);setimgbox(index);
}
function prevImg() {var index = setNewIndex(false);setimgbox(index);
}
function zoomIn() {zoom_rate += 10;doZoom(zoom_rate);setoperimgbox();
}
function zoomOut() {zoom_rate -= 10;doZoom(zoom_rate);setoperimgbox();
}function doZoom(zoom_rate){//$("#show_img").css('width', zoom_rate + '%').css('height', zoom_rate + '%');	var naturalWidth= $("#show_img")[0].naturalWidth;$("#show_img").css('width', naturalWidth*zoom_rate*0.01+'px');clearTimeout(zoom_timeout);zoom_rate=parseInt(zoom_rate);$("#zoom_show").show();$("#zoom_show").html(zoom_rate+'%');zoom_timeout=setTimeout(function (){$("#zoom_show").hide('fast');},1000);
}
function setoperimgbox(){var obImage=$("#operimg_box");var ob_width = obImage.width();var ob_height = obImage.height();//alert(ob_width +":"+ob_height);var ob_left = (window.innerWidth-ob_width)/2;var ob_top = (window.innerHeight-ob_height)/2;console.log(ob_left+"   "+ob_top+" "+ ob_width+" "+ob_height+" "+window.innerWidth+" "+window.innerHeight);$("#operimg_box").css("left",ob_left).css("top",ob_top);$("#mask_bg").show();$("#operimg_box").show();
}/*删除*/
function delimg(index){//var imgboxid=$(x).parent().parent().attr("id");var smallimgbox='uploadList_'+index;ZYFILE.funDeleteFile(parseInt(index), true)$("#"+smallimgbox).remove();}function setimgbox(index){createOpenBox();zoom_rate = 100;operimg_id='uploadImage_'+index;var smallImg=$("#"+operimg_id);// alert(smallImg[0].naturalWidth);var naturalWidth=smallImg[0].naturalWidth;var naturalHeight=smallImg[0].naturalHeight;zoom_rate=600/Math.max(naturalWidth,naturalHeight)*100;$("#show_img").attr("src",smallImg.attr('src'));$("#mask_bg").show();$("#operimg_box").show();//$("#show_img").css('width', zoom_rate + '%').css('height', zoom_rate + '%');$("#show_img").css('width', naturalWidth*zoom_rate*0.01+'px');var num=$("#"+operimg_id).attr('curr_rotate');$("#show_img").rotate({angle:90*num});$("#delimg").click(function(){$("#show_img").attr("src","");$("#operimg_box").hide();$("#mask_bg").hide();});setoperimgbox();
}
/**/
//引用初始化JS
$(function(){// 初始化插件$("#demo").zyUpload({width            :   "650px",                 // 宽度height           :   "400px",                 // 宽度itemWidth        :   "120px",                 // 文件项的宽度itemHeight       :   "100px",                 // 文件项的高度url              :   "/upload/UploadAction",  // 上传文件的路径multiple         :   true,                    // 是否可以多个文件上传dragDrop         :   true,                    // 是否可以拖动上传文件del              :   true,                    // 是否可以删除文件finishDel        :   false,                   // 是否在上传文件完成后删除预览/* 外部获得的回调接口 */onSelect: function(files, allFiles){                    // 选择文件的回调方法console.info("当前选择了以下文件:");console.info(files);console.info("之前没上传的文件:");console.info(allFiles);},onDelete: function(file, surplusFiles){                     // 删除一个文件的回调方法console.info("当前删除了此文件:");console.info(file);console.info("当前剩余的文件:");console.info(surplusFiles);},onSuccess: function(file){                    // 文件上传成功的回调方法console.info("此文件上传成功:");console.info(file);},onFailure: function(file){                    // 文件上传失败的回调方法console.info("此文件上传失败:");console.info(file);},onComplete: function(responseInfo){           // 上传完成的回调方法console.info("文件上传完成");console.info(responseInfo);}});
});

全部代码:zyupload图片上传

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ESP8266用AT指令实现连接MQTT

1准备工作 硬件&#xff08;ESP8266&#xff09;连接电脑 硬件已经烧入了MQTT透传固件 2实现连接 2-1&#xff08;进入AT模式&#xff09; 打开串口助手发送如下指令 AT 2-2&#xff08;复位&#xff09; ATRST 2-3&#xff08;开启DHCP&#xff0c;自动获取IP&#x…

免费视频批量横版转竖版

简介 视频处理器 v1.3 是一款由是貔貅呀开发的视频编辑和处理工具&#xff0c;提供高效便捷的视频批量横转竖&#xff0c;主要功能&#xff1a; 导入与删除文件&#xff1a;轻松导入多个视频文件&#xff0c;删除不必要的文件。暂停与继续处理&#xff1a;随时暂停和继续处理。…

C# Math.Ceiling方法向上取整和Math.Floor方法向下取整

Math.Ceiling方法向上取整 用于对指定的双精度浮点值进行向上取整。这意味着它会返回大于或等于指定数字的最小整数。如果数字是整数&#xff0c;则Math.Ceiling将返回该整数本身。 double number1 3.13; double number2 5.0; double number3 -2.72;double result1 Math.…

Python学习笔记43:游戏篇之外星人入侵(四)

前言 在前面的文章中&#xff0c;我们已经对项目进行了简单的分析&#xff0c;并且已经编写好了基础的代码&#xff0c;接下来的工作就是进一步的分析游戏的业务功能&#xff0c;在基础代码之上&#xff0c;进行填充。 背景颜色 我们简单的创建窗口以后&#xff0c;除了命名…

php如何处理和表设计,不同商家的多商品订单,如何进行拆单和费用处理?

在处理不同商家的多商品订单时&#xff0c;拆单和费用处理是一个复杂但重要的任务。在PHP中进行订单处理和表设计。 数据库表设计 用户表 (users) idnameemail等等 商家表 (vendors) idnamecontact_info等等 商品表 (products) idnamepricevendor_id (外键&#xff0c;关联商…

设置使用小米google play和APK的下载使用

我们常常遇到从google play无法下载apk文件&#xff0c;被迫从APKcombo和APKpure两个网站下载安装文件&#xff0c;可是安装文件在手机google play服务框架未开启时即使安装好了&#xff0c;也没法用。也需要把google play服务框架安装好&#xff0c;下面分别介绍&#xff1a; …

Mac 中安装内网穿透工具ngrok

ngrok 是什么&#xff1f; Ngrok 是一个网络工具&#xff0c;主要用于在网络中创建从公共互联网到私有或本地网络中运行的web服务的安全隧道。它充当了一个反向代理&#xff0c;允许外部用户通过公共可访问的URL访问位于防火墙或私有网络中的web应用程序或服务。Ngrok 特别适用…

Three.js 官方文档学习笔记

Address&#xff1a;Three.js中文网 (webgl3d.cn) Author&#xff1a;方越 50041588 Date&#xff1a;2024-07-19 第一个3D案例—创建3D场景 创建3D场景对象Scene&#xff1a; const scene new THREE.Scene(); 创建一个长方体几何对象Geometry&#xff1a; const geomet…

实验八: 彩色图像处理

目录 一、实验目的 二、实验原理 1. 常见彩色图像格式 2. 伪彩色图像 3. 彩色图像滤波 三、实验内容 四、源程序和结果 (1) 主程序(matlab (2) 函数FalseRgbTransf (3) 函数hsi2rgb (4) 函数rgb2hsi (5) 函数GrayscaleFilter (6) 函数RgbFilter 五、结果分析 1. …

某数据泄露防护(DLP)系统NetSecConfigAjax接口SQL注入漏洞复现 [附POC]

文章目录 某数据泄露防护(DLP)系统NetSecConfigAjax接口SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现某数据泄露防护(DLP)系统NetSecConfigAjax接口SQL注入漏洞复现 [附POC] 0x01 前言 免责声明:请…

硬盘取证(电子数据取证)

硬盘取证是电子数据取证的一个重要分支&#xff0c;涉及对硬盘驱动器&#xff08;包括传统硬盘HDD、固态硬盘SSD等&#xff09;进行调查&#xff0c;以收集、保存、分析和呈现与法律案件或安全事件有关的电子证据。硬盘取证的目标是确保收集的证据在法庭上具有可接受性和可靠性…

【Emacs有什么优点,用Emacs写程序真的比IDE更方便吗?】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

springcloud接入skywalking作为应用监控

下载安装包 需要下载SkyWalking APM 和 Java Agent 链接: skywalking 安装 下载JDK17&#xff08;可不配置环境变量&#xff09; 目前skywalking 9.0及以上版本基本都不支持JDK8&#xff0c;需要JDK11-21&#xff0c;具体版本要求在官网查看。 我这里使用的是skywalking9.…

JMeter:高并发时的分布式压测

为什么需要分布式压测 JMeter是基于Java的应用&#xff0c;以线程的方式来模拟用户。每个线程占有的内存一般是8KB&#xff0c;所以并发用户较高时&#xff0c;使用单台计算机容易出现Java内存溢出错误。因而&#xff0c;在高并发时&#xff0c;通常需要借助多台机器同时发压&…

Unity UGUI 之 图集

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本&#xff0c;请注意分别 1.什么是图集 精灵图…

tensorflow安装及数据操作----学习笔记(一)

安装Miniconda 下载对应系统版本的Miniconda。我的系统是ubuntu&#xff0c;所以选择Miniconda3 Linux 64-bit。下载后执行下载的sh脚本 sh Miniconda3-latest-Linux-x86_64.sh -b执行后&#xff0c;运行conda初始化命令 ~/miniconda3/bin/conda init关闭当前命令终端&#…

google 浏览器插件开发简单学习案例:TodoList;打包成crx离线包

参考&#xff1a; google插件支持&#xff1a; https://blog.csdn.net/weixin_42357472/article/details/140412993 这里是把前面做的TodoList做成google插件&#xff0c;具体网页可以参考下面链接 TodoList网页&#xff1a; https://blog.csdn.net/weixin_42357472/article/de…

phpstorm配置xdebug3

查看php路径相关信息 php --ini安装xdebug https://www.jetbrains.com/help/phpstorm/2024.1/configuring-xdebug.html?php.debugging.xdebug.configure php.ini 配置 在最后添加&#xff0c;以下是我的配置 [xdebug] zend_extension/opt/homebrew/Cellar/php8.1/8.1.29/p…

NXP芯片知识:eMIOS和STM和LCU和BCTU和TRGMUX和PIT区别

在嵌入式系统中&#xff0c;各种定时和控制模块有不同的功能和应用场景。以下是这些模块的具体应用区别&#xff1a; 1. Enhanced Modular I/O System (eMIOS) 应用场景&#xff1a; 脉宽调制&#xff08;PWM&#xff09;&#xff1a;用于电机控制、亮度调节、音频信号生成等…

2024秋招算法

文章目录 参考资料一 数组1.1 二分查找1.2 移除元素1.3 长度最小的子数组1.4 螺旋矩阵1.5 在排序数组中查找元素的第一个和最后一个位置 二 链表2.1 移除链表元素2.2 设计链表2.3 反转链表2.4 两两交换链表中的节点2.5 删除链表的倒数第N个节点2.6 链表相交2.7 环形链表II 三 哈…