Ueditor 前后端分离实现文件上传到独立服务器
2017-01-22 12:44
211 查看
关于Ueditor 前后端分离实现文件上传到独立服务器,在网上搜索确实遇到大坑,不过还好遇到了 虚若影 最终实现了,在此感谢!
虚若影的原文博客网址:http://www.cnblogs.com/hpnet/p/6290452.html
具体项目:如下截图
1.在本地IIS 中添加网站 ueditorweb.com 、ueditortest[b].com 、 testweb (注意应用程序池要选择.net的版本)[/b]
[b]
[/b]
[b][b]2.hosts文件中添加 [/b][/b]
[b][b]127.0.0.1 ueditorweb.com ueditor后台上传处理程序[/b][/b]
[b][b][b][b][b]127.0.0.1 [b]ueditortest[b].com ueditor前台使用项目1[/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b]127.0.0.1 [b][b]testweb[/b][/b][/b][/b][/b][/b][/b].com [b][b][b][b][b][b][b][b]ueditor前台使用项目2[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]3.在接下来打开[b][b][b][b][b][b][b]ueditortest[b].com 和 [b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]testweb[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b].com[/b][/b][/b][/b][/b][/b][/b][/b]下面的ueditor.config.js, 找到:, serverUrl: URL + "net/controller.ashx"改成:, serverUrl: "http://[b][b]ueditorweb.com[/b][/b]/controller.ashx" [/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]4.在[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditorweb.com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]项目下。打开config.json,搜索 Prefix": "/ueditor/net/", 全部改成 UrlPrefix": "http://[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditorweb.com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]/", 这是图片上传成功后的地址前缀。[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]5.多图上传、附件、视频等上传的实现设置:(两种方法)[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b](1)[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]在[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditorweb.com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]项目下配置web.config[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b](2)在IIS中添加[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
注意:Access-Control-Allow-Origin:* 表示允许任何域名跨域访问
我这里使用*是因为有多个网站需要用到为了实现单图片上传,如果只有一个网站用到,为了安全最好使用 Access-Control-Allow-Origin:http://[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditortest[b].com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]好了,至此[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]多图上传、附件、视频等,就能实现上传了[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]6.单图片上传,使用[b]iframe跨域,实现起来比较麻烦[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]在ueditor前台应用项目中添加result.ashx 代码如下(下面要用到,如果是多个项目,每个项目都添加)[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]打开ueditor.all.js或者ueditor.all.min.js你页面上调用哪个就打开哪个,搜索<input id="edui_input_ 在</form>之前加上:[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]<input type="hidden" name="issimpleupload" value="true" /> 这样上传后我们好通过获取issimpleupload来判断是不是简单文件上传。[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditor.all.js[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]
[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditor.all.min.js[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
打开[b][b]ueditorweb.com项目中App_Code文件夹中Handler.cs,将WriteJson方法修改替换成如下代码[/b][/b]
至此,ueditor上传图片、附件、视频、截图、涂鸦等功能都能上传独立的服务器上。
在此还要感谢下 虚若影 感谢 感谢 非常感谢!!!
虚若影的原文博客网址:http://www.cnblogs.com/hpnet/p/6290452.html
具体项目:如下截图
1.在本地IIS 中添加网站 ueditorweb.com 、ueditortest[b].com 、 testweb (注意应用程序池要选择.net的版本)[/b]
[b]
[/b]
[b][b]2.hosts文件中添加 [/b][/b]
[b][b]127.0.0.1 ueditorweb.com ueditor后台上传处理程序[/b][/b]
[b][b][b][b][b]127.0.0.1 [b]ueditortest[b].com ueditor前台使用项目1[/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b]127.0.0.1 [b][b]testweb[/b][/b][/b][/b][/b][/b][/b].com [b][b][b][b][b][b][b][b]ueditor前台使用项目2[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]3.在接下来打开[b][b][b][b][b][b][b]ueditortest[b].com 和 [b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]testweb[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b].com[/b][/b][/b][/b][/b][/b][/b][/b]下面的ueditor.config.js, 找到:, serverUrl: URL + "net/controller.ashx"改成:, serverUrl: "http://[b][b]ueditorweb.com[/b][/b]/controller.ashx" [/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]4.在[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditorweb.com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]项目下。打开config.json,搜索 Prefix": "/ueditor/net/", 全部改成 UrlPrefix": "http://[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditorweb.com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]/", 这是图片上传成功后的地址前缀。[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]5.多图上传、附件、视频等上传的实现设置:(两种方法)[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b](1)[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]在[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditorweb.com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]项目下配置web.config[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Headers" value="Content-Type,X_Requested_With" /> <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS,TRACE,HEAD" /> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer>
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b](2)在IIS中添加[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
注意:Access-Control-Allow-Origin:* 表示允许任何域名跨域访问
我这里使用*是因为有多个网站需要用到为了实现单图片上传,如果只有一个网站用到,为了安全最好使用 Access-Control-Allow-Origin:http://[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditortest[b].com[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]好了,至此[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]多图上传、附件、视频等,就能实现上传了[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]6.单图片上传,使用[b]iframe跨域,实现起来比较麻烦[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]在ueditor前台应用项目中添加result.ashx 代码如下(下面要用到,如果是多个项目,每个项目都添加)[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; var result = context.Request["result"]; //当然这里最好判断一下result是否安全,不要接收到内容就显示这样会被人利用。 if (result != null) context.Response.Write(result.ToString()); //context.Response.Write("Hello World"); } public bool IsReusable { get { return false; } }
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]打开ueditor.all.js或者ueditor.all.min.js你页面上调用哪个就打开哪个,搜索<input id="edui_input_ 在</form>之前加上:[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]<input type="hidden" name="issimpleupload" value="true" /> 这样上传后我们好通过获取issimpleupload来判断是不是简单文件上传。[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditor.all.js[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]
[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
[b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b][b]ueditor.all.min.js[/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b][/b]
打开[b][b]ueditorweb.com项目中App_Code文件夹中Handler.cs,将WriteJson方法修改替换成如下代码[/b][/b]
protected void WriteJson(object response) { string jsonpCallback = Request["callback"], json = JsonConvert.SerializeObject(response); if (String.IsNullOrWhiteSpace(jsonpCallback)) { var webupload = Request["webupload"]; var weburl = "ueditortest.com"; if (webupload != null) { switch (webupload) { case "ueditortest": weburl = "ueditortest.com"; break; case "testweb": weburl = "testweb.com"; break; } } var issimple = Request["IsSimpleUpload"]; if (issimple != null && issimple.ToString() == "true") { Response.Redirect("http://" + weburl + "/result.ashx?result=" + json); //把json传递到c.com下面去呈现结果。 } Response.AddHeader("Content-Type", "text/plain"); Response.Write(json); } else { Response.AddHeader("Content-Type", "application/javascript"); Response.Write(String.Format("{0}({1});", jsonpCallback, json)); } Response.End(); }
至此,ueditor上传图片、附件、视频、截图、涂鸦等功能都能上传独立的服务器上。
在此还要感谢下 虚若影 感谢 感谢 非常感谢!!!
相关文章推荐
- UEditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!
- phpcms实现图文分离,文件上传到远程服务器的方法
- SpringBoot+Vue.js实现前后端分离的文件上传功能
- SSM框架中-使用KindEditor+Nginx服务器+FTP服务,实现多文件上传
- MAC实用SSH连接远程服务器,并实现文件上传下载
- ueditor前后端分离下的图片上传解决方法
- Java Springboot结合FastDFS实现文件上传以及根据图片url将图片上传至图片服务器
- Ajax——使用html配合php实现文件上传到服务器
- JSP+Servlet使用jspsmartupload实现文件上传至服务器
- 多项目共享图片方案,前后端分离上传方案,跨域上传文件方案,js-php跨域访问
- linux自动备份文件 并上传到远程服务器 脚本实现
- react+antd+feathers实现前后端简单的文件上传下载
- C# 中WinForm 应用程序实现远程文件管理(上传、下载)的种种问题——远程服务器返回错误
- Java连接FTP服务器并且实现对其文件的上传和下载
- java实现上传文件到服务器和客户端
- Java实现跨服务器上传文件功能
- Java实现文件上传至服务器的方法
- java实现多文件上传至本地服务器功能
- Java实现文件上传服务器和客户端
- Java利用ssh协议实现本地文件到远程Linux服务器的上传。