七牛云:ckeditorjssdk结合c#实现多图片上传。

KMSFan KMSFan     2022-08-04     325

关键词:

成功了,搞了2天。分享一下经验。

首先是把官方的那个例子下载下来,然后照如下的方式修改。

其中tempValue是一个全局变量。

function savetoqiniu() {

	var uploader = Qiniu.uploader({
	runtimes: "html5,flash,html4",
	browse_button: "setfile",
	    save_key:false,
	//uptoken: qiniu_uptoken,
	get_new_uptoken: true,
	uptoken_func:function()
	{
	    tempValue=GetFileInfo();
	    var res = $.ajax({
	        type: "get",
	        data: {
	            key: tempValue
	        },
	        url: "/goods/CkeditorGetUploadToken/",
	            async: false
	    });
	    return JSON.parse(res.responseText).uptoken;
	},
	//uptoken_url: "/goods/CkeditorGetUploadToken?key=" + tempValue,
	domain: qiniu_bucket_domain,
	container: "container",
	max_file_size: "6mb",
	filters: {
		mime_types: [{
			title: "Image files",
			extensions: "jpeg,jpg,gif,png,wbmp"
		}]
	},
	flash_swf_url: "./Moxie.swf",
	max_retries: 3,
	dragdrop: true,
	drop_element: "container",
	chunk_size: "4mb",
	auto_start: false,
	init: {
		"PostInit": function() {
			document.getElementById("uploadfile").onclick = function() {
				//document.getElementById("setfile").style.display = "none";
				uploader.start();
				return false
			}
		},
		"FilesAdded": function(up, files) {
			plupload.each(files,
			function(file) {
			    document.getElementById("fileinfo").innerHTML += ‘<div id="‘ + file.id + ‘">‘ + file.name + "   (" + plupload.formatSize(file.size) + ")      <b></b>	<i></i></div><br>";
			    //var key = Math.round(new Date().getTime() / 1000) + "_" + file.name;
			    //keyQiniuUpload = key;
			    //Test2();
			})
		},
		"BeforeUpload": function (up, file) {
		    
        },
		"UploadProgress": function(up, file) {
			document.getElementById(file.id).getElementsByTagName("b")[0].innerHTML = "<span>" + file.percent + "%</span>"
		},
		"FileUploaded": function(up, file, info) {
			var res = JSON.parse(info);
			var sourceLink = qiniu_bucket_domain + "/" + res.key;
			document.getElementById(file.id).getElementsByTagName("i")[0].innerHTML = sourceLink;
			window.CKEDITOR.tools.callFunction(1, sourceLink, ‘ok‘);
		},
		"Error": function(up, err, errTip) {},
		"UploadComplete": function() {},
		"Key": function(up, file) {
		    var key = tempValue;
			console.log(up);

			return key;
		}
	}
});
}

  另外注意一点,就是KEY要传到后台去的,每次的KEY不同。下面是C#代码。

        /// <summary>
        /// 获得CKEDITOR上传凭证
        /// </summary>
        /// <returns></returns>
        public ActionResult CkeditorGetUploadToken(string key)
        {
           string s= UploadUtil.GetUploadToken("kmsfan",key);

            if (!string.IsNullOrEmpty(s))
            {
                token token1 = new token();
                token1.uptoken = s;
                s = JsonConvert.SerializeObject(token1);
                //HttpContext.Response.ContentType = "text/plain";
                return Content(s);
                //return Json(new { uptoken = s});
            }
            return Json(new { IsSuccess = false });
        }

  网上还没找到类似的解法,我这人不太善于表达,如果有需要的话,不懂的,请在底下留言。

ueditor上传图片到七牛云存储(formapi,java)

转:http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情

七牛云实现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.创... 查看详情

初试“七牛云”--零基础运用七牛云配合ueditor实现图片的上传和浏览(.net篇)

...个新问题,第一步当然是先百度一下。。。看了N个关于七牛云的使用的帖子,表示还是蒙圈的,看懂了一部分,但是不系统,理解的不连贯,作为一个凡是要弄个特别明白的死脑筋,于是开始从头看是研究文档。。。。(以下... 查看详情

如何利用”七牛云”在ueditor实现图片的上传和浏览

...来操作的。现在我重新整理一下实现的步骤:1.注册一个七牛云用户2. 在七牛云网站中创建一个空间来存储图片,存储区域选择华东或是华北,请先记得上传到华东1 查看详情

go+1.0发布,七牛云许式伟:以python之形结合go之心,让数据科学无处不在

10月15日,由七牛云主办的“Go+Together”Go+1.0发布会,暨Go+开发者基金会启动仪式在上海举行。发布会现场,许式伟发布了Go+1.0版本,并启动了Go+开发者基金会。Go+是一种基于Go的通用语言,融... 查看详情

canvas保存图片到七牛云(代码片段)

最近在做一个项目,需要在前端对图片切片并上传到七牛云技术要点canvas.toBlob(blob=>);//可将canvas保存成二进制文件formData.append(‘file‘,blob,‘filename‘);//将二进制文件添加到FormData中ajax.send(formData);//上传数据到后端处理代码实... 查看详情

七牛云音画质量分析系统的行业前瞻

...量分析在短视频爆发式增长的当下凸显得尤为重要,七牛云推出的音画质量分析系统QoE结合前沿的音视频处理技术和深度学习模型,在音画质量分析行业成为了佼佼者并带来一定影响力。LiveVideoStackCon2022音视频技术大会... 查看详情

七牛云音画质量分析系统的行业前瞻

...量分析在短视频爆发式增长的当下凸显得尤为重要,七牛云推出的音画质量分析系统QoE结合前沿的音视频处理技术和深度学习模型,在音画质量分析行业成为了佼佼者并带来一定影响力。LiveVideoStackCon2022音视频技术大会... 查看详情

对话七牛云技术总监陈辉:音视频行业中的新系统新规划和新增长

编者按:从去年七牛云音视频团队发布音画质量分析系统到现在已有半年多的时间,得到了很多业内玩家和客户的认可。在即将召开的LiveVideoStackCon2022音视频技术大会上海站,七牛云将以专场的形式再次亮相。对此&#x... 查看详情

内含福利七牛云线下专场活动免费报名

10月30日 | 北京 LiveVideoStack将携手七牛云共邀4位技术大咖,围绕着实时音视频场景下,七牛云如何从多个维度实现保障和提升音画质量,分享针对保障和提升音视频质量从编解码到网络传输,从服务端到客户端... 查看详情

thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos

参考技术AThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网站将图片上传至七牛云才能显著提升网站的响应速度,手把手交大家如何上配置ThinkPHP6上传文件至七牛云.然后我... 查看详情

阿里云的域名给七牛云的配置cdn和ssl

...求全部HTTPS,没有办法阿里云的免费ssl证书不能给七牛云的二级子域名使用,先实现七牛云的HTTP自定义域名1、七牛云中进入“融合CDN加速域名“,添加自定义域名,一般是阿里云域名前面加一个二级子域名... 查看详情

dedecms织梦七牛云存储二次开发

DeDeCMS(织梦)整合七牛云储存的优势1、节省自身服务器带宽、流量、储存空间,因为使用七牛云前端JSSDK上传到七牛云。2、提高网站加载速度,因为大部分的流量由七牛云分发,减少了自身服务器带宽的占用,七牛云的CDN比普通... 查看详情

kindeditor加入七牛云上传

七牛云上传主要有两种:服务端上传前端上传,前端又分两种返回方式:1).重定向返回,可以解决ajax跨域的问题2).回调返回,七牛云先向服务端要返回数据,再由七牛云返回前端,解决不支持重定向的请求方式,比如小程序上... 查看详情

wordpress建站2.七牛云备份wordpress网站图文教程

1.宝塔面板下载七牛云2.注册七牛云​​https://portal.qiniu.com/​​实名制和绑定好改绑定的东西3.记住七牛云的AK,SK4.新建七牛云空间对象存储->空间管理->新建空间5.七牛云绑定自定义加速域名上面的图点击域名,自定义域名... 查看详情

php表单上传图片到七牛云存储并返回地址……求具体流程~有代码更好

...篇记录,如下原文地址:http://cuiqingcai.com/?p=157网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了。研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向。首先本篇文章实现的功能如下:1.利... 查看详情

如何用建木ci往七牛云上传文件(代码片段)

#gitee仓库路径#七牛云空间管理中创建的空间名字#七牛云密钥管理中的AK#七牛云密钥管理中的SK#存储区域,不设置时,自动识别,华东:z0;华北:z1;华南:z2;北美:na0;东南亚:as0#上传后在七牛云生成的uri#要上传的文件目... 查看详情