AjaxUpload跨域上传问题

最新推荐文章于 2021-08-05 14:03:05 发布

转载最新推荐文章于 2021-08-05 14:03:05 发布 · 303 阅读

标签

#json

本文介绍了一种通过设置document.domain实现跨域的文件上传方案，并详细展示了如何使用AjaxUpload进行文件上传的具体配置，以及服务端接收上传文件并返回响应的过程。

1. 调用上传的html页面所在域名是 www.abc.com ，添加document.domain

AjaxUpload 设置

$(function () {

        // 创建一个上传参数
        var uploadOption0 =
        {
            // 提交目标
            action: "http://upload.abc.com/FileUpload/Upload",
            // input file id,name
            id: "file_0",
            name: "file_0",
            responseType: false, // "json",
            // 自动提交
            autoSubmit: true,
            // 选择文件之后…
            onChange: function (file, extension) {
                if (!new RegExp(/(jpg)|(jpeg)|(bmp)|(gif)|(png)/i).test(extension)) {
                    layer.msg("只限上传图片文件，请重新选择！");
                }
            },
            // 开始上传文件
            onSubmit: function (file, extension) {
                layer.msg("正在上传文件:" + file + "...");
            },
            // 上传完成之后
            onComplete: function (file, responseText) {                
                var response = eval("(" + responseText + ")");
                layer.msg(response.message);
                if (response.success) {
                    $("#file0_name").val(response.data.name);
                    $("#file0_upload_name").val(response.data.upload_name);
                    $("#file0_extension").val(response.data.extension);
                    $("#file0_size").val(response.data.size);
                    $("#file0_url").val(response.data.url);
                    $("#file0_download_url").val(response.data.download_url);
                    $("#file0_msg").html("<span style='color:#008000;'>已上传</span>");
                    $("#file0_msg").removeClass("error");

                }
            }
        }

        // 初始化图片上传框
        var oAjaxUpload0 = new AjaxUpload('#btnupload0', uploadOption0);

    })

2. 上传服务端 FileUpload/Upload 在 upload.abc.com

public ActionResult Upload()
{
       string message = "上传成功,文件大小:" + size;

            json = new JsonResult
            {
                Data = new
                {
                    success = true,
                    message = message,
                    data = new
                    {
                        name = name,
                        upload_name = upload_name,
                        extension = extension,
                        size = size,
                        url = url,
                        download_url = file_downloadpath + url
                    }
                }
            };
            return CrossDomainContent(json);
}



private ContentResult CrossDomainContent(JsonResult json)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<script> document.domain = 'abc.com'; </script>");
            sb.Append(JsonConvert.SerializeObject(json.Data));
            return Content(sb.ToString());
        }

3. 添加了document.domain 的html页面会影响到其他iframe页面，比如某些js日期控件（如 My97DatePicker/WdatePicker.js 也要加上document.domain,相应的引用 My97DatePicker/WdatePicker.js 的页面也要加上 document.domain）