关键词：
1.Html界面：
1 <div id="container"> 2 <label>凭证：</label> 3 <div id="uploadImage" class="mui-btn" style="float: left; margin-top: 5px;text-align: center;padding:10px;width: 100px;">选择图片 4 </div> 5 <br/><br/> 6 <div class="upload-progress" id="imgs" style=" margin-top: 5px;"> 7 </div> 8 </div>
2.引用js
1 <script src="https://cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js"></script> 2 <script src="js/qiniu.min.js"></script>
3.js上传图片：首先获取Token值，一定是页面开始加载就执行此代码
mui.ajax({ url: getAddress() + ‘/api/Qiliu/get?jsoncallback=?‘, data: {}, async: false, dataType: ‘json‘, crossDomain: true, //强制使用5+跨域 type: ‘get‘, timeout: 10000, success: function(data) { token = data; ar uploader = Qiniu.uploader({ runtimes: ‘html5,flash,html4‘, //上传模式,依次退化 browse_button: ‘uploadImage‘, //上传选择的点选按钮，**必需** //uptoken_url: , //Ajax请求upToken的Url，**强烈建议设置**（服务端提供） uptoken:token, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成 // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。 // save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理 //domain: ‘‘, //bucket 域名，下载资源时用到，**必需** get_new_uptoken: true, //设置上传文件的时候是否每次都重新获取新的token container: ‘container‘, //上传区域DOM ID，默认是browser_button的父元素， max_file_size: ‘100mb‘, //最大文件体积限制 filters: { mime_types: [ //文件类型过滤，这里限制为图片类型 {title: "Image files", extensions: "jpg,jpeg,gif,png"} ] }, flash_swf_url: ‘js/plupload/Moxie.swf‘, //引入flash,相对路径 max_retries: 3, //上传失败最大重试次数 dragdrop: true, //开启可拖曳上传 drop_element: ‘container‘, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 chunk_size: ‘4mb‘, //分块上传时，每片的体积 auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传 init: { ‘FilesAdded‘: function(up, files) { } plupload.each(files, function(file) { // // 文件添加进队列后,处理相关的事情 // // if (!files.match(/.jpg|.gif|.png|.bmp/i)) { //判断上传文件格式 // return mui.alert("上传的图片格式不正确，请重新选择！"); // } // var s = document.getElementById(‘imgs‘); s.innerHTML=""; fd=""; }); }, ‘BeforeUpload‘: function(up, file) { // 每个文件上传前,处理相关的事情 console.log("开始上传之前"); }, ‘UploadProgress‘: function(up, file) { console.log("上传中"); // 每个文件上传时,处理相关的事情 }, ‘FileUploaded‘: function(up, file, info) { // 每个文件上传成功后,处理相关的事情 // 其中 info.response 是文件上传成功后，服务端返回的 json，形式如 // { // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", // "key": "gogopher.jpg" // } //var domain = up.getOption(‘domain‘); // var res = parseJSON(info.response); var res = JSON.parse(info.response);}, ‘Error‘: function(up, err, errTip) {
console.log(‘error============‘+errTip);
//上传出错时,处理相关的事情
},
‘UploadComplete‘: function() {
//队列文件处理完毕后,处理相关的事情 },
‘Key‘: function(up, file) { // 若想在前端对每个文件的key进行个性化处理，可以配置该函数 // 该配置必须要在 unique_names: false , save_key: false 时才生效 var key =new Date().getTime(); // do something with key here return key } } }); } });
4.公众号展示图片
1）引用css
1 <link rel="stylesheet" href="../css/imageview.css" /> 2 <link rel="stylesheet" href="../css/mui.imageviewer.css" />
1 .mui-preview-image.mui-fullscreen { 2 position: fixed; 3 z-index: 20; 4 background-color: #000; 5 } 6 .mui-preview-header, 7 .mui-preview-footer { 8 position: absolute; 9 width: 100%; 10 left: 0; 11 z-index: 10; 12 } 13 .mui-preview-header { 14 height: 44px; 15 top: 0; 16 } 17 .mui-preview-footer { 18 height: 50px; 19 bottom: 0px; 20 } 21 .mui-preview-header .mui-preview-indicator { 22 display: block; 23 line-height: 25px; 24 color: #fff; 25 text-align: center; 26 margin: 15px auto 4; 27 width: 70px; 28 background-color: rgba(0, 0, 0, 0.4); 29 border-radius: 12px; 30 font-size: 16px; 31 } 32 .mui-preview-image { 33 display: none; 34 -webkit-animation-duration: 0.5s; 35 animation-duration: 0.5s; 36 -webkit-animation-fill-mode: both; 37 animation-fill-mode: both; 38 } 39 .mui-preview-image.mui-preview-in { 40 -webkit-animation-name: fadeIn; 41 animation-name: fadeIn; 42 } 43 .mui-preview-image.mui-preview-out { 44 background: none; 45 -webkit-animation-name: fadeOut; 46 animation-name: fadeOut; 47 } 48 .mui-preview-image.mui-preview-out .mui-preview-header, 49 .mui-preview-image.mui-preview-out .mui-preview-footer { 50 display: none; 51 } 52 .mui-zoom-scroller { 53 position: absolute; 54 display: -webkit-box; 55 display: -webkit-flex; 56 display: flex; 57 -webkit-box-align: center; 58 -webkit-align-items: center; 59 align-items: center; 60 -webkit-box-pack: center; 61 -webkit-justify-content: center; 62 justify-content: center; 63 left: 0; 64 right: 0; 65 bottom: 0; 66 top: 0; 67 width: 100%; 68 height: 100%; 69 margin: 0; 70 -webkit-backface-visibility: hidden; 71 } 72 .mui-zoom { 73 -webkit-transform-style: preserve-3d; 74 transform-style: preserve-3d; 75 } 76 .mui-slider .mui-slider-group .mui-slider-item img { 77 width: auto; 78 height: auto; 79 max-width: 100%; 80 max-height: 100%; 81 } 82 .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img { 83 width: 100%; 84 } 85 .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item { 86 display: inline-table; 87 } 88 .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img { 89 display: table-cell; 90 vertical-align: middle; 91 } 92 .mui-preview-loading { 93 position: absolute; 94 width: 100%; 95 height: 100%; 96 top: 0; 97 left: 0; 98 display: none; 99 } 100 .mui-preview-loading.mui-active { 101 display: block; 102 } 103 .mui-preview-loading .mui-spinner-white { 104 position: absolute; 105 top: 50%; 106 left: 50%; 107 margin-left: -25px; 108 margin-top: -25px; 109 height: 50px; 110 width: 50px; 111 } 112 .mui-preview-image img.mui-transitioning { 113 -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; 114 transition: transform 0.5s ease, opacity 0.5s ease; 115 } 116 @-webkit-keyframes fadeIn { 117 0% { 118 opacity: 0; 119 } 120 100% { 121 opacity: 1; 122 } 123 } 124 @keyframes fadeIn { 125 0% { 126 opacity: 0; 127 } 128 100% { 129 opacity: 1; 130 } 131 } 132 @-webkit-keyframes fadeOut { 133 0% { 134 opacity: 1; 135 } 136 100% { 137 opacity: 0; 138 } 139 } 140 @keyframes fadeOut { 141 0% { 142 opacity: 1; 143 } 144 100% { 145 opacity: 0; 146 }
2)引用js
1 <script type="text/javascript" src="../js/mui.imageViewer.js" ></script> 2 <script type="text/javascript" src="../js/mui.previewimage.js" ></script> 3 <script type="text/javascript" src="../js/mui.zoom.js" ></script>
3)html
1 <div class="mui-input-row" style="height: 350px;"> 2 <label>图片：</label> 3 <div class="upload-progress" id="imgs"></div> 4 </div>
4）js
1 var s = document.getElementById(‘imgs‘); 2 var imgs=data[0].Pzimg; 3 var img =[]; 4 img=imgs.split(‘,‘); 5 for(var i=0;i<img.length-1;i++){ 6 result = ‘<div id="result" style="float:left;margin-top: 5px;"><img style="height: 100px; width:100px " data-preview-src="" data-preview-group="1" src="‘ + 7 img[i] + ‘" /></div>‘; 8 div = document.createElement(‘div‘); 9 div.innerHTML = result; 10 s.appendChild(div);
上传base64图片到七牛云前端遇到的坑
介意前端普通引入七牛云SDk上传图片到七牛云需要多个js，所以才有了base64的上传方式，简化操作，（懒。）七牛云官方文档如下https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code 我们前端理所当然就... 查看详情
前端上传图片头像到七牛云格式变成text
...牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片流转换成图片写入本... 查看详情
dedecms织梦七牛云存储二次开发
...节省自身服务器带宽、流量、储存空间，因为使用七牛云前端JSSDK上传到七牛云。2、提高网站加载速度，因为大部分的流量由七牛云分发，减少了自身服务器带宽的占用，七牛云的CDN比普通的自建服务器还是要快的。3、不破坏... 查看详情
前端图片上传思路记录
需求：可一次上传多张，多次上传；可单张删除；可小图预览；使用七牛云存储图片；非必传；提交表单表单后可重新编辑；平台：pc，兼容方面主要考虑谷歌浏览器；思路：1.准备好页面结构input[type]=file mutipul和input[type=hidd... 查看详情
在ipic中添加七牛云
参考技术A七牛云是iPic在内测期间呼声比较高的国内图床，这里介绍下在iPic中添加七牛云的过程。这点比较简单，直接到这里注册即可。七牛的数据处理是以资源为单位的，这里我们可以简单理解为七牛中的文件夹。登录七牛后... 查看详情
文件流数组上传到七牛云
...申请个空间，获得密钥、等东西，引入官方sdk包，然后再开发文档中找到代码copy进去就可以了。因为非常简单，我就直接弄上代码了。1packagecom.qianmo.foru.bean.request;23importcom.qianmo.core.common.CommonRequest;4importorg.hibernate.validator.constrain... 查看详情
thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos
参考技术AThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网站将图片上传至七牛云才能显著提升网站的响应速度,手把手交大家如何上配置ThinkPHP6上传文件至七牛云.然后我... 查看详情
canvas保存图片到七牛云(代码片段)
最近在做一个项目，需要在前端对图片切片并上传到七牛云技术要点canvas.toBlob(blob=>);//可将canvas保存成二进制文件formData.append(‘file‘,blob,‘filename‘);//将二进制文件添加到FormData中ajax.send(formData);//上传数据到后端处理代码实... 查看详情
ueditor上传图片到七牛云存储（formapi,java）
...or上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor将ueditor中的图片模块的在线管理功能和七... 查看详情
七牛云：ckeditorjssdk结合c#实现多图片上传。
成功了，搞了2天。分享一下经验。首先是把官方的那个例子下载下来，然后照如下的方式修改。其中tempValue是一个全局变量。functionsavetoqiniu(){ varuploader=Qiniu.uploader({ runtimes:"html5,flash,html4", browse_button:"setfile", save_key:false, //uptoken:q... 查看详情
node七牛云上传文件
七牛云储存nodejs qiniu模块测试的一个实例constqiniu=require(‘qiniu‘)//需要填写你的AccessKey和SecretKeyvaraccessKey=‘‘varsecretKey=‘‘varmac=newqiniu.auth.digest.Mac(accessKey,secretKey)//要上传的空间名buketvarbucket=‘image‘va 查看详情
golang七牛云上传示例(代码片段)
七牛云文件上传助手(代码片段)
qiniuyun_upload_tools最近写博客发现经常要上传图片到七牛云上去，每次打开网页登录然后上传感觉很慢，windows也没有一个好的上传工具，于是写了这样的一个工具。效果使用方法下载程序包点击下载解压后直接在config.json文件里面... 查看详情
如何用建木ci往七牛云上传文件(代码片段)
#gitee仓库路径#七牛云空间管理中创建的空间名字#七牛云密钥管理中的AK#七牛云密钥管理中的SK#存储区域，不设置时，自动识别，华东：z0；华北：z1；华南：z2；北美：na0；东南亚：as0#上传后在七牛云生成的uri#要上传的文件目... 查看详情
springboot上传文件到七牛云
准备工作mavenpom.xml添加七牛云的sdk依赖<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.27</version></dependency>配置项七牛云上传 查看详情
javawebservletjsp使用七牛云api上传图片(代码片段)
文章目录JavaWebservletjsp使用七牛云API上传图片工具类七牛云工具类JDBC工具类servicePhotoServicePhotoServiceImplDaoPhotoDaoPhotoDaoImplvoMyPutRetPhotoResultwebappweb.xmldata.jspdetail.jspindex.jsplist.jsptransfer.jspservletJDBCs 查看详情
七牛云实现js上传
七牛云的官方API写的一塌糊涂。最主要的，还是版本兼容的问题。 一、引入文件引入了两个文件：1.jquery-1.10.2.min.js2.plupload.full.min.js3.qiniu.js版本太重要了。我提供了下载地址。二.html代码<pclass="tip1">本demo实现的图片预览... 查看详情
java实现七牛云文件或图片上传下载(代码片段)
文章目录一、准备工作1.1.为什么选择七牛云?1.2.七牛云注册二、java操作七牛云对象存储下载2.1.pom.xml引入依赖2.2.上传下载具体代码三、具体业务例子(七牛云做图片服务器--SpringBoot)3.1.pom.xml(此处继承上面的依赖多引入一个)3.2.创... 查看详情