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

时间:2022-06-01 16:49:34

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

效果图

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

 

 

前端 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(1481263944125)\/","Code":"100","Message":"成功","Url":"/Passport/2016/12/09/0c19c1ad07674e628deaad4acc289268.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=\"http://upload.com" + jsonData.Url + "\" class=\"img\" urlData=\"" + jsonData.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 upLoadUrl = "http://upload.com/ReceiveFile/Index";//异步上传文件地址 url需要改成本地配自己的域名
            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, 0, paramByte.Length); } stream.Write(line, 0, line.Length); #endregion #region 传文件 Stream fileReceiveStream = file.InputStream;//测试是否可以合并 byte[] fileByte = new byte[fileReceiveStream.Length]; fileReceiveStream.Read(fileByte, 0, 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, 0, fileHeadByte.Length); stream.Write(fileByte, 0, fileByte.Length); stream.Write(line, 0, 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 = "102", 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 = "101", 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 = "100", 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