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文件的作用跨域,顾名思义就是需要的资源不在自己的域服务器上,需要访问其他域服务器.跨域策略文件 ...

随机推荐

[转]ExtJS Grid 分页时保持选中的简单实现方法
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...
sql server生成递归日期
WITH Date AS ( SELECT CAST('2008-08-01' AS DATETIME) da UNION ALL FROM Date WHERE da < '2008-08-2 ...
Python中用format函数格式化字符串
Python的字符串格式化有两种方式: 百分号方式.format方式百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 1.百分号方式语法:%[( ...
架构师养成记--12.Concurrent工具类CyclicBarrier和CountDownLatch
java.util.concurrent.CyclicBarrier 一组线程共同等待,直到达到一个公共屏障点. 举个栗子,百米赛跑中,所有运动员都要等其他运动员都准备好后才能一起跑(假如没有发令员) ...
jquery插件——检测DOM元素是否在浏览器可视范围之内
引言 web应用中有很多地方会用到打点,用来检测用户行为,今天就做了个打点相关的需求,为了统计一个广告给用户的展示次数,每次用户请求完成并且渲染完成之后就算一次成功的展示,其实有时候这个广告还没有在用 ...
POJ 2251 Dungeon Master（3D迷宫 bfs）
传送门 Dungeon Master Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 28416 Accepted: 11 ...
火车头采集ecshop 文章接口文件
<?php header("Content-Type:text/html;charset=utf-8"); $host = $_SERVER['HTTP_HOST']; // ...
推荐一款Linux下的开源编辑器
Sublime编辑器,下载地址.下载后解压,解压到家目录下,为解压后的文件夹里的可执行文件添加环境变量, vim ~/.bashrc 打开配置环境变量的文件,在最后一行添加export PATH=&q ...
Kinect之彩色图像数据
彩色图像很有用,很有用!!说到图像识别,未来肯定是个大方向!在机器人视觉和一些智能识别在应用很广,而获取下来的数据再加上Opencv就能做出很多很好玩很有趣的功能.这个以后等我进一步成长后再回来慢慢记 ...
Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

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

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

随机推荐

热门专题