SWFUpload多图上传、C#后端跨域传文件带参数

前几天工作中用到了SWFUpload上传图片，涉及到跨域，因为前端无法实现跨域，所以只能把文件传到后端进行跨域请求，整理分享下。

效果图

前端 html部分

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>图片上传</title>

    <style>

        .divContent {

            float: left;

            margin-right: 20px;

        }

        .divDiv {

            border: 1px solid rgb(235, 235, 235);

            width: 150px;

            height: 150px;

        }

        .img {

            width: 150px;

            height: 150px;

        }

        .delImg {

            position: relative;

            top: -150px;

            right: -134px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div>

        <div>

            <span id="spanButtonPlaceholder"></span><span id="imgNum">当前0张图片</span>

        </div>

    </div>

    <div class="TrDiv" id="imgUrl" style="margin-left:15px;">

    </div>

    <script src="~/JS/SWFUpload/swfupload.js"></script>

    <script src="~/JS/SWFUpload/handlers.js"></script>

    <script src="~/JS/Common/jquery-1.7.1.min.js"></script>

    <script src="~/JS/UpLoad/upload.js"></script>

    <script type="text/javascript">

        $(function () {

            upLoad.init();

        });

    </script>

</body>

</html>

前端JS SWFUpload处理

var upLoad = function () {

    var currentNum = 0;

    var totalNum = 0;

    var _initEvent = function () {

        initSwfu();

    }

    var initSwfu = function () {

        var swfu;

        var file_queue_limit = 20;//队列1，每次只能上传1个,若是1个以上，上传后的样式是叠加图片

        swfu = new SWFUpload({

            upload_url: "/UpLoad/LocalReceive",

            post_params: { "Service": "MyServiceName", "Token": "b2ed46cd1bee4e5d816abdb1ec31b0f8" },

            file_size_limit: "2 MB", //最大2M

            file_types: "*.jpg;*.png;*.gif;*.bmp", //设置选择文件的类型

            file_types_description: "JPG Images", //描述文件类型

            file_upload_limit: "0", //0代表不受上传个数的限制

            file_queue_limit: file_queue_limit,

            file_queue_error_handler: fileQueueError,

            file_dialog_complete_handler: fileDialogComplete, //当关闭选择框后,做触发的事件

            upload_progress_handler: uploadProgress, //处理上传进度

            upload_error_handler: uploadError, //错误处理事件

            upload_success_handler: uploadSuccess, //上传成功够,所处理的时间

            upload_complete_handler: uploadComplete, //上传结束后,处理的事件

            button_image_url: "/JS/SWFUpload/images/XPButtonNoText_160x22.png",

            button_placeholder_id: "spanButtonPlaceholder",

            button_width: 160,

            button_height: 22,

            //button_text: '',

            //button_text_style: '.spanButtonPlaceholder { font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} ',

            button_text: '<span class="button">选择图片<span class="buttonSmall">(2 MB Max)</span></span>',

            button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',

            button_text_top_padding: 1,

            button_text_left_padding: 5,

            button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

            button_cursor: SWFUpload.CURSOR.HAND,

            flash_url: "/JS/SWFUpload/swfupload.swf",    // Relative to this file

            custom_settings: {

                upload_target: "divFileProgressContainer"

            },

            debug: false //是否开启日志

        });

    }

    //swfupload插件上传成功回调事件

    function uploadSuccess(file, serverData) {

        var jsonData = eval('(' + serverData + ')');//{"Time":"\/Date(1481627678361)\/","Code":"100","Message":"成功","Url":"/UpLoadFile/2016/12/13/4E69D7D19EFAFC3F7B927887EA5A2804.jpg"}

        if (jsonData.Code != "100") {

            alert(jsonData.Message);

        } else {

            if (currentNum >= 10) {

                alert("上传图片不能超过10张");

                return;

            }

            totalNum++;

            currentNum++;

            $("#imgNum").html("当前" + currentNum + "张图片");

            var imgHtml = "";

            imgHtml += "<div class=\"divContent\">";

            imgHtml += " <div class=\"divDiv\">";

            imgHtml += "<img src=\"" + jsonData.Url + "\" class=\"img\" urlData=\"" + jsonData.Url + "\"/>";//url需要改成本地配自己的域名

            imgHtml += "</div>";

            imgHtml += "<img class=\"delImg\" src=\"/Content/Img/del.png\" id=\"" + totalNum + "\">";

            imgHtml += "</div>";

            $("#imgUrl").append(imgHtml);

            $("#" + totalNum + "").click(function () {

                $(this).parent().remove();

                currentNum--;

                $("#imgNum").html("当前" + currentNum + "张图片");

            });

        }

    }

    //swfupload插件上传失败回调事件

    function uploadError(file, serverData) {

        alert("上传失败");

    }

    return {

        init: function () {

            _initEvent();

        }

    }

}();

本地后端接收文件和参数，并已二进制格式发送给文件服务器。

 public ActionResult LocalReceive()

        {

            string token = Request["token"];

            string service = Request["service"];

            HttpPostedFileBase file = Request.Files["FileData"];

            string fileName = Path.GetFileName(file.FileName);

            string url = HttpContext.Request.Url.Authority;

            string upLoadUrl = "http://" + url + "/ReceiveFile/Index";

            string boundry = "----------------------------------" + DateTime.Now.Ticks.ToString("x");//boundary是分隔符 因为上传文件不在使用原有的http协议了。请求内容不再可能以 x = y方式发送了。而使用了 分隔符 字段内容 分隔符号 字段内容2 而boundary就是指定分隔符号的标志。

            try

            {

                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(upLoadUrl);

                request.ContentType = "multipart/form-data;boundary=" + boundry;//设置二进制方式传输

                request.Method = "POST";

                request.KeepAlive = true;

                request.Credentials = CredentialCache.DefaultCredentials;//获取或设置请求的身份验证信息。

                MemoryStream stream = new MemoryStream();

                byte[] line = Encoding.UTF8.GetBytes("\r\n--" + boundry + "\r\n");

                #region 传文本参数

                Dictionary<string, string> paramDic = new Dictionary<string, string>();

                paramDic.Add("Service", service);

                paramDic.Add("Token", token);//上传注掉

                string paramTempalte = "\r\n--" + boundry + "\r\nContent-Disposition: form-data;name=\"{0}\";\r\n\r\n{1}";

                foreach (var item in paramDic)

                {

                    string paramStr = string.Format(paramTempalte, item.Key, item.Value);

                    byte[] paramByte = Encoding.UTF8.GetBytes(paramStr);

                    stream.Write(paramByte, , paramByte.Length);

                }

                stream.Write(line, , line.Length);

                #endregion

                #region 传文件

                Stream fileReceiveStream = file.InputStream;//测试是否可以合并

                byte[] fileByte = new byte[fileReceiveStream.Length];

                fileReceiveStream.Read(fileByte, , fileByte.Length);

                fileReceiveStream.Close();

                string fileHeadTemplate = "Content-Disposition: form-data;name=\"{0}\";filename=\"{1}\"\r\nContent-Type:application/octet-stream\r\n\r\n";

                string fileHeadStr = string.Format(fileHeadTemplate, "FileData", fileName);

                byte[] fileHeadByte = Encoding.UTF8.GetBytes(fileHeadStr);

                stream.Write(fileHeadByte, , fileHeadByte.Length);

                stream.Write(fileByte, , fileByte.Length);

                stream.Write(line, , line.Length);

                #endregion

                #region 结束上传

                request.ContentLength = stream.Length;

                Stream requestStream = request.GetRequestStream();

                stream.Position = 0L;

                stream.CopyTo(requestStream);

                stream.Close();

                requestStream.Close();

                #endregion

                #region 获取返回

                HttpWebResponse responseReceive = request.GetResponse() as HttpWebResponse;

                Stream streamReceive = responseReceive.GetResponseStream();

                StreamReader streamReader = new StreamReader(streamReceive, Encoding.UTF8);

                string content = streamReader.ReadToEnd();

                #endregion

                JavaScriptSerializer js = new JavaScriptSerializer();

                UpLoadFileOut upLoadFileOut = js.Deserialize<UpLoadFileOut>(content);

                return Json(upLoadFileOut);

            }

            catch (Exception ex)

            {

                return Json(new { Code = "", Message = "服务器内部错误", Exception = ex.Message });

            }

文件服务器接收参数和文件，验证参数并保存文件。

        public ActionResult Index()

        {

            string token = Request["token"];

            string service = Request["service"];

            if (token != "b2ed46cd1bee4e5d816abdb1ec31b0f8" || service != "MyServiceName")

            {

                return Json(new { Time = DateTime.Now, Code = "", Message = "参数错误", Url = "" });

            }

            HttpPostedFileBase file = Request.Files["FileData"];

            string fileName = Path.GetFileName(file.FileName);

            string fileExt = Path.GetExtension(fileName);

            string dir = "/UpLoadFile/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";

            Directory.CreateDirectory(Path.GetDirectoryName(Request.MapPath(dir)));

            string fullDir = dir + GetStreamMD5(file.InputStream) + fileExt;

            //文件的MD5值也就是文件名，故根据文件完成路径来判断是否重复上传了，若重复则不需保存。

            if (!System.IO.File.Exists(Request.MapPath(fullDir)))

            {

                file.SaveAs(Request.MapPath(fullDir));

            }

            return Json(new { Time = DateTime.Now, Code = "", Message = "成功", Url = fullDir });

        }

        /// <summary>

        /// 计算文件的MD5值

        /// </summary>

        /// <param name="stream"></param>

        /// <returns></returns>

        public static string GetStreamMD5(Stream stream)

        {

            string strResult = "";

            string strHaseData = "";

            byte[] arrbyHashValue;

            System.Security.Cryptography.MD5CryptoServiceProvider oMD5Hasher =

                new System.Security.Cryptography.MD5CryptoServiceProvider();

            arrbyHashValue = oMD5Hasher.ComputeHash(stream);

            strHaseData = System.BitConverter.ToString(arrbyHashValue);

            strHaseData = strHaseData.Replace("-", "");

            strResult = strHaseData;

            return strResult;

        }

欢迎批评指正和交流探讨

DEMO下载地址： http://download.csdn.net/detail/fcydxbd/9710819

SWFUpload多图上传、C#后端跨域传文件带参数的更多相关文章

netcore3.1 + vue (前后端分离) ElementUI多文件带参数上传
vue前端代码前端主要使用了ElementUI的el-uploda插件,除去业务代码需要注意的是使用formdata存储片上传时所需的参数 <el-upload class="upl ...
vue 组件传参及跨域传参
可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...
js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
使用nginx反向代理处理前后端跨域访问
本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...
为什么返回的数据前面有callback？ ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
为什么返回的数据前面有callback? 这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...
[ActionScript 3.0] 跨域策略文件crossdomain.xml配置详解
1.简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访 ...
flash跨域策略文件crossdomain.xml
flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 位于www.a.com域中的SWF文件要访问www. ...
flash跨域策略文件crossdomain.xml配置详解
来源:http://www.2cto.com/Article/201108/100008.html 0x01 简介 flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了 ...
跨域策略文件crossdomain.xml文件
使用crossdomain.xml让Flash可以跨域传输数据一.crossdomain.xml文件的作用跨域,顾名思义就是需要的资源不在自己的域服务器上,需要访问其他域服务器.跨域策略文件 ...

随机推荐

hibernate通过注解实现实体和表的映射
参考: 表名的映射: //代表此类参与ORM映射,此注解必须要有 @Entity //代表user这个类映射了一个表user50,如果表名和类名一样,此注解可以省略 @Table(name=" ...
Map工具系列-07-TFS变更集提取工具
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
Git怎样撤销一次分支的合并Merge
出现的问题: 某一天,所有的开发文件已经在development分支上,但是这时候,线上出了一个问题,需要及时修复,于是从master分支上,拉了一个bug分支,进行处理,master分支本应合并bu ...
asp.net页面生命周期
Asp.Net页面生命周期本文转载自:http://www.cnblogs.com/xhwy/archive/2012/05/20/2510178.html 一．什么是Asp.Net页面生命周期当 ...
HDU 3669 Cross the Wall
题目大意给定 \(N\) 个矩形的宽和高, \((h_1, w_1), (h_2, w_2), \dots, (h_n w_n)\) . 现需要确定 \(k\) (\(k \le K\), \(K\ ...
加密算法中BASE64、MD5、SHA、HMAC等之间的区别
http://blog.csdn.net/lplj717/article/details/51828692 根据项目需要了解了一下几种加密算法(参考其他博客),内容简要介绍BASE64.MD5.SHA ...
Day6-python基础之模块
模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...
JAVA源码分析-HashMap源码分析(一)
一直以来,HashMap就是Java面试过程中的常客,不管是刚毕业的,还是工作了好多年的同学,在Java面试过程中,经常会被问到HashMap相关的一些问题,而且每次面试都被问到一些自己平时没有注意的 ...
Matlab插值函数
x=0:2*pi; y=sin(x); xx=0:0.5:2*pi; %interp1对sin函数进行分段线性插值,调用interp1的时候,默认的是分段线性插值 y1=interp1(x,y,xx) ...
Hibernate（Control）
案例:http://blog.csdn.net/jiuqiyuliang/article/details/39380465 对象关系映射框架,它对JDBC进行了轻量级的对象封装,可以使用对象编程思维来 ...

SWFUpload多图上传、C#后端跨域传文件带参数

SWFUpload多图上传、C#后端跨域传文件带参数的更多相关文章

随机推荐

热门专题