七牛云:ckeditor JS SDK 结合 C#实现多图片上传。

成功了,搞了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 });
        }

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

时间: 2024-10-18 11:45:31

七牛云:ckeditor JS SDK 结合 C#实现多图片上传。的相关文章

PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id="articlecontent" ><?php echo $request['content']; ?></textarea> <script type="text/javascript"> $('#articleconten

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

七牛云存储Python SDK使用教程 - 上传策略详解

文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k 浏览 本教程旨在介绍如何使用七牛的Python SDK来快速地进行文件上传,下载,处理,管理等工作. 前言 我们在上面的两节中了解到,客户端上传文件时,需要从业务服务器申请一个上传凭证(Upload Token),而这个上传凭证是业务服务器根据上传策略(PutPolicy)来生成的,而这个生成过程中

.net core CKEditor 图片上传

最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="content" name="content"></text> <script> CKEDITOR.replace('content'); </script> CKeditor config.js 配置代码:需要配置图片上传路径 CKEDIT

KindEditor图片上传到七牛云

自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEditor的源码和七牛的SDK看得云里雾里的,网上搜索又没有类似的解决方法,只好继续看源码自己搞了,弄了整整一个晚上,基本实现了,下面说说我的做法: 版本说明: KindEditor版本:4x 七牛SDK:7.x.x 后端脚本:PHP 先看一下七牛给出的表单模板,在这里file和token这两个表单项是必须

Android开发中使用七牛云存储进行图片上传下载

Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储原理,上面这幅图片是官方给出的原理图,表述当然比较清晰了.可以看出,要进行图片上传的话可以分为五大步: 1. 客户端用户登录到APP的账号系统里面: 2. 客户端上传文件之前,需要向业务服务器申请七牛的上传凭证,这个凭证由业务服务器使用七牛提供的服务端SDK生成: 3. 客户端使用七牛提供的客户端S

图片上传到七牛云

必须要传一个参数类型为 MultipartFile 的 第一步:引入相关配置文件和工具类并导入依赖: qiniu.properties: qiniu.accessKey=xxxxxxxxxxxxx #公钥 qiniu.secretKey=yyyyyyyyyyyyy #密钥 qiniu.bucket=saas #存储空间名称 qiniu.rtValue=xxxxxxx #域名 公钥密钥在这里找 域名这里找: import com.google.gson.Gson; import com.qiniu

ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/1237/csharp UpoladService示例代码: public class UpoladService : IUpoladService {     private readonly static string[] _imageExtensions = new string[] { ".jpg", ".png", ".gif&quo

话说android端七牛图片上传

七牛图片上传业务流程如下图(这是官方的图): 由上图可知,要想实现图片上传,是要三端进行交互的(我刚刚开始以为只要七牛服务器跟客户端交互就行) 接下来步骤如下: 1.首先肯定是要有一个七牛的账号,并创建一个空间 2.客户端向业务服务器(也就是客户端的应用服务器)发请求你要上传多上张图片 3.业务服务器根据客户端的请求向七牛云存储生成token(应用的服务器下载好相应的七牛sdk然后根据接口文档所述向七牛服务器请求token,token相当于一把钥匙,具体代码我也不知道怎么实现,毕竟我不是写后台的