最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传。我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口。虽然这种方式经过一个代理页面会增加消耗的时间,但总算解决了跨域上传的问题。现在粘贴我的代码如下,前端脚本:

 (function () {
var imgOperate = {
operateUrl: "更改图片在数据库中的状态地址",
uploadUrl: "代理图片上传地址",
DelPicId: '',
ddWidth: 0,
dlWidth:0,
onload: function () {
this.initImage();
},
initImage: function () {
var et = $('#entrust dd').length;
this.ddWidth = $('#entrust dd').width() + 17;
this.dlWidth = parseInt(et * this.ddWidth + 160);
$('#entrust').css("width", this.dlWidth);
this.BindEvent();
},
BindEvent: function () {
var _this = this;
$("#pic0").on("change", function () { _this.uploadFiles(this); }); },
InserImage:function(urls,dd)
{
$.post(this.operateUrl, { houseid: houseid, operateType: 1, picStr: urls }, function (data) {
data = eval("(" + data + ")");
if (data && data.picIds)
{
dd.getElementsByTagName("img")[0].setAttribute("housepicid", data.picIds);
}
});
},
uploadFiles: function (where) { var imgLength = $("#entrust dd").length - 1; if (imgLength >= 50)
{
this.ShowMsg("你的图片超过了50张,不能再上传");
return;
}
if (imgLength + where.files.length > 50)
{
this.ShowMsg("你选择的图片超过了50张,无法上传,请重新选择");
return;
}
var _this = this;
var radtime = new Date();
var _this = this;
var sid = radtime.getTime();
for (var i = 0, successCount=0; i < where.files.length; i++) {
var formData = new FormData(); formData.append("icoimage",where.files[i]); $.ajax({
url:this.uploadUrl+ '?channel=频道&sid=' + sid,
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).success(function (res) {
var imgsrc = res;
if (imgsrc == "-1" || imgsrc == "302" || imgsrc == -1 || imgsrc == 302) {
_this.ShowMsg("上传失败,照片超过10M");
} else if (imgsrc.indexOf("http")!=-1) {
var dd = document.createElement("dd");
if ($("#entrust dd").length == 1) {
dd.innerHTML = "<div class=\"cver\">封面图</div><a class=\"close\"></a><img src=\"" + imgsrc + "\" housepicid=\"\">";
} else {
dd.innerHTML = "<a class=\"close\"></a><img src=\"" + imgsrc + "\" housepicid=\"\">";
}
document.getElementById("entrust").appendChild(dd);
_this.dlWidth += _this.ddWidth + 17;
$('#entrust').css("width", _this.dlWidth);
_this.InserImage(imgsrc, dd);
successCount++;
_this.ShowMsg("正在上传第" + i + "张图片");
}
if (i == where.files.length) {
if (successCount > 0) {
_this.ShowMsg("成功上传" + successCount + ",可继续上传新照片");
}
} else {
_this.ShowMsg("上传失败");
} })
} },
ShowMsg: function (text, mymethod) {
var radtime = new Date();
var sid = radtime.getTime();
var msg_div = "<div class='zuopenbox' id='div_msg" + sid + "'><div class='opencon_01'><div class='openList'><h3 class='f15' style='margin-bottom: 0; color: #FFFFFF'>" + text + "</h3></div></div></div>"; $(msg_div).appendTo("body");
var _this = this;
setTimeout(function () {
var d = 0.5;
var m = document.getElementById("div_msg"+sid);
m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
m.style.opacity = '0';
setTimeout(_this.RemoveNode(m), 500);
}, 500);
},
RemoveNode: function (m) {
m.parentNode.removeChild(m);
} } imgOperate.onload();
window.imgOperate = imgOperate; })();

前端脚本代码

代理服务器代码:

     public override void ProcessRequest(HttpContext context)
{
//获取目标站点地址
String target = "图片服务器地址";
string sid = context.Request["sid"];
target = string.Format("{0}?city=&channel=频道&sid={1}&backurl=",target,sid);
if(context.Request.Files.Count>)
{
var file = context.Request.Files[];
HttpWebRequest request = WebRequest.Create(target) as HttpWebRequest;
CookieContainer cookieContainer = new CookieContainer();
request.CookieContainer = cookieContainer;
request.AllowAutoRedirect = true;
request.Method = "POST";
request.Headers.Add("Origin", "http://" + context.Request.UrlReferrer.Host);
request.Headers.Add("Accept-Encoding", "gzip, deflate");
request.Headers.Add("Accept-Language", "zh-CN,zh;q=0.8");
request.Headers.Add("Upgrade-Insecure-Requests", "");
request.Referer = context.Request.UrlReferrer.OriginalString;
string boundary = DateTime.Now.Ticks.ToString("X"); // 随机分隔线
request.ContentType = "multipart/form-data;charset=utf-8;boundary=" + boundary;
byte[] itemBoundaryBytes = Encoding.UTF8.GetBytes("\r\n--" + boundary + "\r\n");
byte[] endBoundaryBytes = Encoding.UTF8.GetBytes("\r\n--" + boundary + "--\r\n"); //请求头部信息
StringBuilder sbHeader = new StringBuilder(string.Format("Content-Disposition:form-data;name=\"file\";filename=\"{0}\"\r\nContent-Type:application/octet-stream\r\n\r\n", file.FileName));
byte[] postHeaderBytes = Encoding.UTF8.GetBytes(sbHeader.ToString());
//FileStream fs = new FileStream(path, FileMode.Open, FileAccess.Read);
byte[] bArr = new byte[file.InputStream.Length];
file.InputStream.Read(bArr, , bArr.Length);
file.InputStream.Close();
Stream postStream = request.GetRequestStream();
postStream.Write(itemBoundaryBytes, , itemBoundaryBytes.Length);
postStream.Write(postHeaderBytes, , postHeaderBytes.Length);
postStream.Write(bArr, , bArr.Length);
postStream.Write(endBoundaryBytes, , endBoundaryBytes.Length);
postStream.Close();
//发送请求并获取相应回应数据
HttpWebResponse response = request.GetResponse() as HttpWebResponse;
SetCookie(response,context);
} }
//response是目标服务器的响应对象,context是返回给浏览器的上下文对象
void SetCookie(HttpWebResponse response, HttpContext context)
{
foreach (Cookie cookie in response.Cookies)
{
if (cookie.Name!=null&&cookie.Name.StartsWith("img"))
{
string result=string.Empty;
if (cookie.Value != null && cookie.Value.StartsWith("http://"))
{
Regex r = new Regex(@"^.*?(?=\|)");
result = r.Match(cookie.Value).Value;
}
else {
result = cookie.Value;
}
context.Response.Write(result);
context.Response.End();
} }
}

因为图片服务器返回的地址是种在cookie当中的,因此代理服务器中我将相应cookie的地址接收予以返回。在开发该功能时我遇到了很多问题,图片接口同事比较忙,无法配合,后来自己模拟相应服务器的接口上传,才发现代理中并没有将文件传上去。经过比较修改,最后才上传成功。

html5上传图片(一)一跨域上传的更多相关文章

  1. 从Ueditor跨域上传,总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  2. Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!

    再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责. 百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说: 好 ...

  3. 我是如何一步步编码完成万仓网ERP系统的(七)产品库设计 3.品牌图片跨域上传

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  4. Editor.md解决跨域上传的问题

    Editor.md解决跨域上传的问题 编辑 editormd\plugins\image-dialog\image-dialog.js 替换以下代码片段 if (settings.crossDomai ...

  5. Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件

    写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...

  6. webuploader 跨域上传demo(还没有写记录一下)

    webuploader 跨域上传demo(还没有写记录一下)

  7. js跨域上传文件 iframe

    封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...

  8. 解决使用elementUI框架el-upload跨域上传时session丢失问题

    解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依 ...

  9. C#--图片上传(PC端和APP)保存及 跨域上传说明

    手动跨域操作文件 补录:跨域访问文件夹文件是一种常见的需求,下面主要介绍的的通过代码使用具有权限账号的人来达到跨域操作文件的能力. 现在补充一下普通的一些需求场景,今天就遇到了一种需要经常需要登录远程 ...

随机推荐

  1. SpringMVC_简单小结

    SpringMVC是一个简单的.优秀的框架.应了那句话简单就是美,而且他强大不失灵活,性能也很优秀. 机制:spring mvc的入口是servlet,而struts2是filter(这里要指出,fi ...

  2. 机器指令翻译成 JavaScript —— No.7 过渡语言

    上一篇,我们决定使用 LLVM 来优化程序,并打算用 C 作为输入语言.现在我们来研究一下,将 6502 指令转换成 C 的可行性. 跳转支持 翻译成 C 语言,可比 JS 容易多了.因为 C 支持 ...

  3. .NET Web的身份认证

    百度一下”asp.net身份认证“,你会得到很多相关的资料,这些资料通常上来就会介绍诸如”Form认证“”Windows认证“等内容,而没有给出一个完整的流程.初学者对此往往一头雾水,我也曾经被坑过很 ...

  4. java中文乱码解决之道(九)-----总结

    乱码,我们前台展示的杀手,可能有些朋友和我的经历一样:遇到乱码先按照自己的经验来解决,如果没有解决就google,运气好一搜就可以解决,运气不好可能够你折腾一番了.LZ之所以写这个系列博客就是因为遇到 ...

  5. Entity Framework 6 Recipes 2nd Edition(9-7)译->在WCF服务中序列化代理

    9-7. 在WCF服务中序列化代理 问题 从一个查询里返回一个动态代理对象,想要把它序列为一个POCO(Plain-Old CLR Objects)对象. 实现基于POCO实体对象, 在运行时,EF会 ...

  6. Jmeter安装与环境部署

    Jmeter安装与环境部署 版权声明:本文为博主原创文章,未经博主允许不得转载. 博主:海宁 联系:whnsspu@163.com

  7. Linux驱动开发—— of_property_read_u8

    在使用設備樹的時候, 有時會遇到下面的問題. 在設備樹中配置的屬性如下: fusb301,init-mode = <0x20>; 但是在驅動中讀出的卻是: rc = of_property ...

  8. 【Python五篇慢慢弹】数据结构看python

    数据结构看python 作者:白宁超 2016年10月9日14:04:47 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给出的pythondoc ...

  9. request中getParameter和getAttribute的区别

    整理一下getParameter和getAttribute的区别和各自的使用范围. (1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方 ...

  10. CE修改器修改DNF 测试视频 阿修罗提升智力增加攻击力

    使用CE修改器来修改网络游戏,如DNF 测试视频: CE修改器:指的是Cheat Engine,字面上的意思指的是作弊引擎的意思,是一款内存修改编辑工具.通过修改游戏的内存数据来得到一些原本无法实现的 ...