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

随机推荐

【Quartz】将定时任务持久化到数据库
之前的文章所做的demo是将定时任务的信息保存在内存中的,见以下配置 org.quartz.jobStore.class = org.quartz.simpl.RAMJobStore 如果,我们需要在 ...
Java递归目录结构
import java.io.File; public class FileTree { public static void main(String[] args) { printFileTree( ...
MySQL性能优化
当今数据库的操作越来越成为整个应用的性能瓶颈,特别是Web应用更加明显.当我们设计数据库和对数据库操作时,都要考虑到性能. 1.优化查询语句,方便查询缓存大多数MySQL服务器都开启了查询缓存,这是 ...
精灵方向移动问题[math.floor]
local xd = math.cos(math.rad(self._direction));--self._direction方向角度 local yd = math.sin(math.rad(se ...
mybatis 一对一与一对多collection和association的使用
在mybatis如何进行一对一.一对多的多表查询呢?这里用一个简单的例子说明. 一.一对一 1.association association通常用来映射一对一的关系,例如,有个类user,对应的实体 ...
dom 节点篇---模块
改写成如下代码: var creatTag=(function(){ //var count=5; var oUl=document.createElement('ul'); var oDiv=doc ...
(error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
今天运行Redis时发生错误,错误信息如下: (error) MISCONF Redis is configured to save RDB snapshots, but is currently n ...
dos 批处学习笔记
dos 批处理@ 只显示命令结果echo 回显pause 暂停del 删除set 查看系统变量>nul 正确命令输入空洞2>nul 错误命令输入空洞dir 显示目录和文件&& ...
CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14
准备篇: CentOS 7.0系统安装配置图解教程 http://www.osyunwei.com/archives/7829.html 一.配置防火墙,开启80端口.3306端口 CentOS 7. ...
Find Out What Your Entity Framework Query Is Really Doing
Assuming that you're using Entity Framework 6, you already have a logging tool that can give you som ...

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

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

随机推荐

热门专题