大文件裁剪阿里云oss上传 plupload

亲测有效

home/include_upload_maxfile.jsp

效果如下

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%><%@page import="com.home.base.DBRow"%>
<%@page import="com.home.control.AdminLoggerBean"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>大文件裁剪阿里云oss上传</title><script type="text/javascript" src="js/jquery-1.6.js"></script><style type="text/css"></style></head><body><input type="file" accept="image/*" onchange="getInfo(event)" ><div style='display:none' ><input type="button" id='start_upload' value='开始上传'  style='hidden'><input type="button" id='button_start_nouse' value='button_start_nouse' style='hidden'></div><div id='console' ></div><!--https://www.cnblogs.com/2050/p/3913184.html--><!-- 阿里云上传 开始 -->                                                <link rel="stylesheet" type="text/css" href="oss-h5-upload/style.css"/><script type="text/javascript" src="oss-h5-upload/lib/crypto1/crypto/crypto.js"></script><script type="text/javascript" src="oss-h5-upload/lib/crypto1/hmac/hmac.js"></script><script type="text/javascript" src="oss-h5-upload/lib/crypto1/sha1/sha1.js"></script><script type="text/javascript" src="oss-h5-upload/lib/base64.js"></script><script type="text/javascript" src="oss-h5-upload/lib/plupload-2.1.2/js/plupload.full.min.js"></script><script type="text/javascript" >accessid= '12323';accesskey= '12323asdfasdfas';host = 'http://static.12345.com';g_dirname = ''g_object_name = ''g_object_name_type = ''now = timestamp = Date.parse(new Date()) / 1000; var policyText = {"expiration": "2031-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了"conditions": [["content-length-range", 0, 1048576000] // 设置上传文件的大小限制]};var policyBase64 = Base64.encode(JSON.stringify(policyText))message = policyBase64var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;var signature = Crypto.util.bytesToBase64(bytes);function getNowFormatDate() {var date = new Date();var seperator1 = "-";var year = date.getFullYear();var month = date.getMonth() + 1;var strDate = date.getDate();if (month >= 1 && month <= 9) {month = "0" + month;}if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}var currentdate = year + seperator1 + month + seperator1 + strDate;return currentdate;}function get_dirname(){dir = document.getElementById("dirname").value;if (dir != '' && dir.indexOf('/') != dir.length - 1){dir = dir + '/'}//alert(dir)g_dirname = dir}function random_string(len) {len = len || 32;var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';   var maxPos = chars.length;var pwd = '';for (i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;}function get_suffix(filename) {pos = filename.lastIndexOf('.')suffix = ''if (pos != -1) {suffix = filename.substring(pos)}return suffix;}function set_upload(up,filename, ret){var suffix = get_suffix(filename)var first='static/';g_object_name = ''+first+getNowFormatDate()+'/' + random_string(10) + suffixvar new_multipart_params = {'key' : g_object_name,'policy': policyBase64,'OSSAccessKeyId': accessid, 'success_action_status' : '200', //让服务端返回200,不然，默认会返回204'signature': signature};new_multipart_params;up.setOption({'url': host,'multipart_params': new_multipart_params});}//实例化一个plupload上传对象var uploader = new plupload.Uploader({'url': host,browse_button : 'button_start_nouse', //触发文件选择对话框的按钮，为那个元素idflash_swf_url : 'oss-h5-upload/lib/plupload-2.1.2/js/Moxie.swf',silverlight_xap_url : 'oss-h5-upload/lib/plupload-2.1.2/js/Moxie.xap',max_file_size: '2mb'});    //绑定各种事件，并在事件监听函数中做你想做的事uploader.bind('FilesAdded',function(uploader,files){console.log("：FilesAdded");    //每个事件监听函数都会传入一些很有用的参数，//我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作});uploader.bind('BeforeUpload',function(uploader,files){console.log("BeforeUpload");    set_upload(uploader, files.name, true);var tmp=$("#console").html();tmp=tmp+"<p style='text-align:center'><span style='color:black;font-weight: bold;'>0%</span></p>";$("#console").html(tmp);});uploader.bind('UploadProgress',function(uploader,file){//每个事件监听函数都会传入一些很有用的参数，var str=file.percent;console.log("UploadProgress-"+str);    //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作$("#console").find('span').text("上传"+str+"%");    });uploader.bind('FileUploaded',function(up, file, info){console.log("得到文件：FileUploaded");    if (info.status == 200){var url=host+"/"+g_object_name;$("#console").html("<img width=100px src='" + url + "' />");}else{alert('error');}//每个事件监听函数都会传入一些很有用的参数，//我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作});//最后给"开始上传"按钮注册事件document.getElementById('start_upload').onclick = function(){uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法}//在实例对象上调用init()方法进行初始化uploader.init();function getInfo(event){let reader = new FileReader();//这里把一个文件用base64编码reader.readAsDataURL(event.target.files[0]);            reader.onload = function(e){let newImg = new Image();//获取编码后的值,也可以用this.result获取newImg.src = e.target.result;newImg.onload = function () {/* 获取  this.height tthis.width*/var dataURL = compress(newImg,this.width,this.height,0.8);/*为了兼容ios 需要 dataURL-> blob -> file */var blob = dataURLtoBlob(dataURL);        // dataURL-> blob var tmpName="tmpName.jpg";//强制.jpgvar file = blobToFile(blob, tmpName);        // blob -> fileconsole.log("得到文件："+file);    console.log("压缩后大小："+file.size/1024);                $("#console").html("<img width=100px src='" + dataURL + "' />");uploader.addFile(file);$('#start_upload').click();}}}    function compress(img, width, height, ratio) { // img可以是dataURL或者图片url/*    如果宽度大于 750 图片太大 等比压缩     */if(width > 750){var ratio = width/height;width = 750;height = 750/ratio;}        var canvas, ctx, img64;canvas = document.createElement('canvas');canvas.width = width;canvas.height = height;ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);/* canvas.toDataURL(mimeType（图片的类型）, qualityArgument（图片质量）) */img64 = canvas.toDataURL("image/jpeg", ratio);return img64; // 压缩后的base64串}//将base64转换为blobfunction dataURLtoBlob (dataurl) { var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });}//将blob转换为filefunction blobToFile(theBlob, fileName){theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;}</script></body>
</html>

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

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

相关文章

ReentrantLock中的Condition的用法

ReentrantLock中的Condition的用法

其实Condition或者说wait和notify/notifyAll,我们是在阻塞队列中经常使用。 1.例子1 生产者消费者模式嘛&#xff0c;一个线程生成数据&#xff0c;有了数据后&#xff0c;通知其它线程取。 也就是await方法&#xff0c;是位于lock之间。 lock.lock() while(queue.empty())…
阅读更多...
一支笔，一双手，一道力扣（Leetcode）做一宿

一支笔，一双手，一道力扣（Leetcode）做一宿

文章目录 一、分享自己相关的经历二、分析可能存在的问题三、根据问题进行分解或建立思维导图四、分享好用的刷题网站并进行介绍 一、分享自己相关的经历 我是一名计算机专业的学生&#xff0c;之前在学习算法和数据结构时&#xff0c;对于简单题目还算能够顺利地刷过去。但是…
阅读更多...
ChatGPT是否能够处理多模态数据和多模态对话？

ChatGPT是否能够处理多模态数据和多模态对话？

ChatGPT有潜力处理多模态数据和多模态对话&#xff0c;这将进一步扩展其在各种应用领域中的实用性。多模态数据是指包含多种不同类型的信息&#xff0c;例如文本、图像、音频和视频等。多模态对话是指涉及多种媒体形式的对话交流&#xff0c;例如同时包含文本和图像的对话。 *…
阅读更多...
漫话拥塞控制：Capacity-Seeking 与 QoE

漫话拥塞控制：Capacity-Seeking 与 QoE

IETF117 CCWG 大会链接&#xff1a;IETF117-CCWG-20230725-2200&#xff0c;更详细信息以及讨论&#xff1a;https://github.com/ietf-wg-ccwg/wg-materials/tree/main/ietf117。 短评&#xff1a; 传统拥塞控制算法几乎都在不断冒险上探更多带宽&#xff0c;并在过程中忍受丢…
阅读更多...
channel通道笔记

channel通道笔记

channel通道笔记 介绍 语法 1.一般使用make创建channel(常用) c : make(chan datatype),datatype是数据类型 2.直接显示声明,创建的值为空,一般没有太大意义 var c chan datatype 三种定义写法: 既可以收数据又可以发数据:chan datatype只可以收数据:chan <- datatype只可…
阅读更多...
求解n阶勒让德多项式的值

求解n阶勒让德多项式的值

描述 用递归方法求n阶勒让德多项式的值&#xff0c;递归公式为&#xff1a; 在主函数中输入一个整数n和一个实数x&#xff0c;调用函数 legendre(n,x)&#xff0c;并输出其返回值。 输入 第一行输入一个整数n&#xff0c;表示阶数&#xff1b;第二行输入一个实数x。 输出 …
阅读更多...
python学习(廖雪峰的官方网站部分，自学笔记)

python学习(廖雪峰的官方网站部分，自学笔记)

python学习 廖雪峰的官方网站强烈推荐 字符串 Python提供了ord()函数获取字符的整数表示&#xff0c;chr()函数把编码转换为对应的字符 ord( )先当与把字符转成整形&#xff0c;chr( ) 把编码转化成相应的字符 有些时候&#xff0c;字符串里面的%是一个普通字符怎么办&…
阅读更多...
java-多线程简述

java-多线程简述

目录 1.实现多线程1.1简单了解多线程【理解】1.2并发和并行【理解】1.3进程和线程【理解】1.4实现多线程方式一&#xff1a;继承Thread类【应用】1.5实现多线程方式二&#xff1a;实现Runnable接口【应用】1.6实现多线程方式三: 实现Callable接口【应用】1.7设置和获取线程名称…
阅读更多...
Photon之如何解决Photon Server无法在局域网使用的bug

Photon之如何解决Photon Server无法在局域网使用的bug

前言 先介绍一下Photon的两个服务器服务： Photon Cloud 是一个完全托管的软件即服务 (SaaS) 解决方案。我们可以完全专注于应用程序客户端，而托管、服务器操作和扩展均由光子官方负责。 Photon Server 是一个本地服务器应用程序，我们可以在本地或指定的计算机上运行和托管。…
阅读更多...
P5960 【模板】差分约束算法

P5960 【模板】差分约束算法

【模板】差分约束算法 题目描述 给出一组包含 m m m 个不等式&#xff0c;有 n n n 个未知数的形如&#xff1a; { x c 1 − x c 1 ′ ≤ y 1 x c 2 − x c 2 ′ ≤ y 2 ⋯ x c m − x c m ′ ≤ y m \begin{cases} x_{c_1}-x_{c_1}\leq y_1 \\x_{c_2}-x_{c_2} \leq y_2 \\…
阅读更多...
【机器学习】 贝叶斯理论的变分推理

【机器学习】 贝叶斯理论的变分推理

许志永 一、说明 贝叶斯原理&#xff0c;站在概率角度上似乎容易解释&#xff0c;但站在函数立场上就不那么容易了&#xff1b;然而&#xff0c;在高端数学模型中&#xff0c;必须要在函数和集合立场上有一套完整的概念&#xff0c;其迭代和运算才能有坚定的理论基础。 二、贝叶…
阅读更多...
Sequence 2023牛客暑期多校训练营6 E

Sequence 2023牛客暑期多校训练营6 E

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;有一长度为n的数组a&#xff0c;有q次询问&#xff0c;每次要求将[l,r]的区间分成k个连续区间&#xff0c;满足每个区间和都是偶数&#xff0c;能满足要求就输出YES 1<n,q<1e5;0<ai<1e10;1<l<r&l…
阅读更多...
Gson：解析JSON为复杂对象：TypeToken

Gson：解析JSON为复杂对象：TypeToken

需求 通过Gson&#xff0c;将JSON字符串&#xff0c;解析为复杂类型。 比如&#xff0c;解析成如下类型&#xff1a; Map<String, List<Bean>> 依赖&#xff08;Gson&#xff09; <dependency><groupId>com.google.code.gson</groupId><art…
阅读更多...
在CSDN学Golang场景化解决方案（EFK分布式日志系统方案）

在CSDN学Golang场景化解决方案（EFK分布式日志系统方案）

一&#xff0c;ElasticSearch 分布式集群部署 在 Golang EFK 分布式日志系统方案中&#xff0c;ElasticSearch 是一个分布式搜索引擎和数据存储库&#xff0c;它可以用于存储和搜索大量的日志数据。以下是 ElasticSearch 分布式集群部署的步骤&#xff1a; 下载 ElasticSearc…
阅读更多...
MyBatis核心 - SqlSession如何通过Mapper接口生成Mapper对象

MyBatis核心 - SqlSession如何通过Mapper接口生成Mapper对象

书接上文 MyBatis – 执行流程 我们通过SqlSession获取到了UserMapper对象&#xff0c;代码如下&#xff1a; // 获取SqlSession对象 SqlSession sqlSession sqlSessionFactory.openSession();// 执行查询操作 try {// 获取映射器接口UserMapper userMapper sqlSession.get…
阅读更多...
vue SKU已知sku.tree算出sku.list类目值和id

vue SKU已知sku.tree算出sku.list类目值和id

已知sku.tree算出sku.list类目值和id <van-skuref"sku"v-model"showBase":close-on-click-overlay"closeOnClickOverlay":goods"skuData.goods_info":goods-id"skuData.goods_id":hide-stock"skuData.sku.hide_stoc…
阅读更多...
数据结构---B树

数据结构---B树

目录标题 B-树的由来B-树的规则和原理B-树的插入分析B-树的插入实现准备工作find函数insert中序遍历 B-树的性能测试B-树的删除B树B树的元素插入B*树的介绍 B-树的由来 在前面的学习过程中&#xff0c;我们见过很多搜索结构比比如说顺序查找&#xff0c;二分查找&#xff0c;搜…
阅读更多...
mac安装nacos，M1芯片

mac安装nacos，M1芯片

第一步&#xff0c;官网下载 》nacos官网 去github中下载对应的版本&#xff0c;本人下载的是1.4.1版本 在这儿选择其他的版本&#xff0c;下面这里选择 tar.gz 压缩包 解压后放到一个非中文的目录下&#xff0c;我选择在 user目录下面创建一个other目录&#xff0c;将使用的环…
阅读更多...
初识Flask：Python轻量级Web框架入门教程

初识Flask：Python轻量级Web框架入门教程

Flask是一个用Python编写的轻量级Web应用框架。由于其“微”性质&#xff0c;Flask在提供核心服务的同时&#xff0c;仍然提供了许多扩展的可能性。在这篇文章中&#xff0c;我们将从最基础开始&#xff0c;学习如何使用Flask构建一个Web应用。 一、安装与初次启动 首先&…
阅读更多...
[回馈]ASP.NET Core MVC开发实战之商城系统(五)

[回馈]ASP.NET Core MVC开发实战之商城系统(五)

经过一段时间的准备&#xff0c;新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始&#xff0c;在之前的文章中&#xff0c;讲解了商城系统的整体功能设计&#xff0c;页面布局设计&#xff0c;环境搭建&#xff0c;系统配置&#xff0c;及首页【商品类型&#xff0c;ba…
阅读更多...
最新文章

Copyright @ 2022~2023