WebClient实现kindeditor跨域上传图片

尝试上传图片到一个单独的服务器,使用的是KindeEditor 4.1.10

kindeditor上传图片原理是:

上传按钮提交到iframe,生成1个form和1个iframe,form提交到(arget)iframe
iframe的onload方法获取返回的值,然后调用配置回调方法afterUpload/afterError。

第一次尝试

页面A document.domain = "aaa.xx.com";

图片服务器B document.domain = "bbb.xx.com";

在同一个域内xx.xx.com,KindEditor图片能上传,但是没有返回信息。

第二次尝试

直接引用

<script src="http:aaa.xx.com/kindeditor/kindeditor.js" type="text/javascript"></script>

KindEditor还是能上传图片,却无法返回信息

第三次把KindEditor直接扔到了服务器A,

页面引用<script src="http:aaa.xx.com/kindeditor/kindeditor.js" type="text/javascript"></script>

并在当前页面B新建ashx,Upload上传路径为本地的ashx通过webclient通知图片服务器的ashx并返回信息

1.通过uploadJson: ‘/upload_json.ashx?action=News‘,将图片上传到本地ashx,并用webcliet通知图片服务器

 HttpPostedFile imgFile = context.Request.Files["imgFile"];//KIndEditor上传的文件
//将imgFile转换成字节形式
        byte[] fileByte = new byte[imgFile.InputStream.Length];
        imgFile.InputStream.Read(fileByte, 0, fileByte.Length);
  //通过WebClient提交文件
//本地地址做测试,端口不同,实现域不同
//图片服务器 http://192.168.0.107:81/
//本地 http://192.168.0.107:80/
        string pUrl = string.Format("http://192.168.0.107:81/");
        string postUrl = string.Format("{0}kindeditor/asp.net/upload_json.ashx?img={1}&path={2}&action={3}", pUrl, imgFile.FileName, path, action);
        System.Net.WebClient webClient = new System.Net.WebClient();
//上传数据
        byte[] responseArray = webClient.UploadData(postUrl, "POST", fileByte);
        string result = System.Text.Encoding.Default.GetString(responseArray, 0, responseArray.Length);
//对返回的数据进行根据KindEditor的样式进行json解析,需要的是Newtonsoft.dll
        hash bk = Newtonsoft.Json.JsonConvert.DeserializeObject<hash>(result);
        Hashtable hash = new Hashtable();
        hash["error"] = 0;        //hash["error"]=bk.error;这样竟然无效
        hash["url"] = string.Format("{0}{1}", pUrl, bk.url);

  图片服务器接受本地上传的二进制图片数据,并对传送过来的主体进行保存

//获得图片
        System.Drawing.Image postImage = System.Drawing.Image.FromStream(context.Request.InputStream);

        //保存
        System.Drawing.Bitmap bitmap_b = new System.Drawing.Bitmap(postImage);
        bitmap_b.Save(filePath);

2.由于项目临时改变,图片和项目放在同一个服务器上,又做了调整

物理路径具体化,比如

[email protected]"http://192.168.0.107:81";

[email protected]"D:\项目\路径";

//String dirPath = context.Server.MapPath(savePath);//相对路径
String dirPath = savePath;//这里改为绝对路径

删除文件的时候

删除的图片是http://192.168.1.1/k/2012/1212.jmg
通过判断是否存在http://头
http://192.168.1.1/k/2012/1212.jpg转换为物理绝对路径"D:\项目/k/2012/1212.jpg
 如果是外部引入的文件则返回原地址
 if (strPath.ToLower().StartsWith("http://"))
            {
                if (strPath.IndexOf(ManagerUrl) >= 0)
                {
                    strPath = strPath.Replace(ManagerUrl, ManagerPath);
                    return strPath;
                }
                else
                {
                    return strPath;
                }
            }
    }

  

嗯,自己整理的也很凌乱,暂时记录下,下次慢慢完善。

时间: 2024-12-07 18:07:30

WebClient实现kindeditor跨域上传图片的相关文章

Kindeditor跨域上传图片在ASP.NET方案中的解决

虽然标题写的是ASP.NET的解决方案,但是也可用在PHP,Jsp中.直接上代码 首先在客户端中配置 var editor; document.domain = window.location.host;//js解析域 KindEditor.ready(function (k) { editor = k.create('#editor_id', { uploadJson: GlobalConfig .RestServiceUrl + "/FileUpload/upload_json.ashx?f

跨域上传图片的尝试过程,最终成功了。哈哈

关于这个跨域上传图片的问题,其实去年底的时候就该去实现的,因为老板朝三暮四,一会儿让做这个,一会儿看那个,就耽误了.因为这个过程花费了我整整一天的时间,我认为有必要记录下来. 首先,项目是一个ERP,针对的是公司的一个小型电商的网站.项目经理让我搭建一个图片服务器, 当时也是为了完(尝)成(尝)任(新)务(鲜),用的都是当时从没接触过的.通过百度就选择了 Nginx + Nodejs + express + ImageMagick 来实现的. 当时还简单看了一下淘宝的TFS(Taobao Fil

让 umeditor 支持跨域上传图片

事实上,umeditor 上传图片采用的是 form+隐藏iframe方式,已经能做到无刷新跨域上传.但小小遗憾的是做的并不完美,上传图片后,反馈的json信息,js并不能读取.原因在于,js不能操作跨域的iframe. 1 var r = this.contentWindow.document.body.innerHTML; 此句代码在FF Chrome上都会报错.浏览器的这种限制,可以通过两个方式来解决 换成flash上传 主页跟iframe页都设置 document.domain . 第一

ueditor富文本编辑器跨域上传图片解决办法

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域, 网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,相出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可. 首先引入页面uedit

kindeditor4跨域上传图片解决

项目中正在使用kindeditor, 版本号4.1.10 非常多公司的图片会走CDN,须要单独的一台图片上传服务如:(upload.268xue.com) kindeditor上传图片的简单内部流程: 上传button是提交到iframe.生成1个form和1个iframe,form提交到(arget)iframe iframe的onload方法获取返回的值.然后调用配置回调方法afterUpload/afterError. 详细实现:(在a.com选中图片,上传用upload.268xue.c

&#183;基于thinkphp5.0和百度编辑器UMeditor 跨域上传图片实现

1.下载两者源码: 2,简单配置 :   a. 一套thinkphp框架是显示前端界面,搭配编辑器环境.对应域名为 http://tp.com:  这是前端界面配置 但是还要修改一下umeditor.config.js 文件    这里配置那个URL ,我思考了很久         我是这么想的  本地站点域名配置到了www/tp5/public位置 ,现在是要实例编辑器加一个路径,而编辑器的文件位置就在public下面: 在此情况下 编辑器会在界面正常显示: 好接下来考虑的问题就是图片上传了.

iframe跨域上传图片

方案一:用jquery的$.post异步提交,然后把返回来的值用jquery填充到隐藏域中.可是$.post不支持跨域. jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. 方案二:利用iframe以及jquery进行表单post提交.代码如下: == a.com/post.html == <script> function postcallback(data){ //code... } </script> <form action=&qu

php 之跨域上传图片

因为要将所有上传的图片上传到一台独立的图片服务器上面,js上传时存在跨域问题,网上找到这种,通过php curl方式,将图片重新发送到另外一台服务器上保存,并返回图片路径! 这种方式存在一定问题:1,上传大图片时,比如2M,需要将图片首先传到服务器,然后再传到图片服务器,中间需要4M的传输,加大了上传时间!2,从服务器转到图片服务器的时候因为没有保存,传输使用的是临时文件,考虑到图片格式的限制,将图片进行了重命名,传输之后对该图片进行删除,碰到一些未知问题是可能导致图片删除失败,增加了服务器存储

webservice跨域上传图片

1.上传文件,在一般处理程序中处理 1 //1.接收post过来的文件 2 HttpPostedFile file = context.Request.Files[0]; 3 if (file.ContentLength > 0 || file.ContentLength > 1024) 4 { 5 if (file.ContentType.Contains("image/")) 6 { 7 //2.讲文件转换为文件流 8 Stream stream = file.Inpu