webuploader 跨域

简介: 1.upload.js // 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker', label: '点击选...

1.upload.js

 // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择图片'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: 'Scripts/Uploader.swf',
            chunked: true, //分片处理大文件
            chunkSize: 2 * 1024 * 1024,
            server: 'http://localhost:54987/Modules/Test/fileupload.ashx',
            //server:'fileupload2.ashx',
            disableGlobalDnd: true,
            threads: 1, //上传并发数
            //由于Http的无状态特征,在往服务器发送数据过程传递一个进入当前页面是生成的GUID作为标示
            formData: { guid: GUID },
            fileNumLimit: 300,
            compress: false, //图片在上传前不进行压缩
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });
View Code
uploader.on("uploadBeforeSend", function (obj, data, headers) {
            _.extend(headers, {
                "Origin": "http://localhost:3504",
                "Access-Control-Request-Method": "POST"
            });

        });
View Code
// 文件上传成功,合并文件。
        uploader.on('uploadSuccess', function (file, response) {
            if (response.chunked) {
                $.post("http://localhost:54987/Modules/Test/MergeFiles.ashx", { guid: GUID, fileExt: response.f_ext },
                function (data) {
                    data = $.parseJSON(data);
                    if (data.hasError) {
                        alert('文件合并失败!');
                    } else {
                        //alert(decodeURIComponent(data.savePath));
                    }
                });
            }
        });
View Code

2.把 fileupload.ashx MergeFiles(合并) 文件放到另一个项目中

//如果进行了分片
            if (context.Request.Form.AllKeys.Any(m => m == "chunk"))
            {
                //取得chunk和chunks
                int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//当前分片在上传分片中的顺序(从0开始)
                int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//总分片数
                //根据GUID创建用该GUID命名的临时文件夹
                string folder = context.Server.MapPath("~/1/" + context.Request["guid"] + "/");
                string path = folder + chunk;

                //建立临时传输文件夹
                if (!Directory.Exists(Path.GetDirectoryName(folder)))
                {
                    Directory.CreateDirectory(folder);
                }

                FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);
                BinaryWriter AddWriter = new BinaryWriter(addFile);
                //获得上传的分片数据流
                HttpPostedFile file = context.Request.Files[0];
                Stream stream = file.InputStream;

                BinaryReader TempReader = new BinaryReader(stream);
                //将上传的分片追加到临时文件末尾
                AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                //关闭BinaryReader文件阅读器
                TempReader.Close();
                stream.Close();
                AddWriter.Close();
                addFile.Close();

                TempReader.Dispose();
                stream.Dispose();
                AddWriter.Dispose();
                addFile.Dispose();

                context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"f_ext\" : \"" + Path.GetExtension(file.FileName) + "\"}");
            }
            else//没有分片直接保存
            {
                //根据GUID创建用该GUID命名的临时文件夹
                string folder = context.Server.MapPath("~/1/");
                //建立临时传输文件夹
                if (!Directory.Exists(Path.GetDirectoryName(folder)))
                {
                    Directory.CreateDirectory(folder);
                }
                context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + DateTime.Now.ToFileTime() + Path.GetExtension(context.Request.Files[0].FileName)));
                context.Response.Write("{\"chunked\" : false, \"hasError\" : false}");
            }
View Code
public class MergeFiles : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string guid = context.Request["guid"];
            string fileExt = context.Request["fileExt"];
            string root = context.Server.MapPath("~/1/");
            string sourcePath = Path.Combine(root,guid + "/");//源数据文件夹
            string targetPath = Path.Combine(root, Guid.NewGuid() + fileExt);//合并后的文件

            DirectoryInfo dicInfo = new DirectoryInfo(sourcePath);
            if (Directory.Exists(Path.GetDirectoryName(sourcePath)))
            {
                FileInfo[] files = dicInfo.GetFiles();
                foreach (FileInfo file in files.OrderBy(f => int.Parse(f.Name)))
                {
                    FileStream addFile = new FileStream(targetPath, FileMode.Append, FileAccess.Write);
                    BinaryWriter AddWriter = new BinaryWriter(addFile);

                    //获得上传的分片数据流
                    Stream stream = file.Open(FileMode.Open);
                    BinaryReader TempReader = new BinaryReader(stream);
                    //将上传的分片追加到临时文件末尾
                    AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                    //关闭BinaryReader文件阅读器
                    TempReader.Close();
                    stream.Close();
                    AddWriter.Close();
                    addFile.Close();

                    TempReader.Dispose();
                    stream.Dispose();
                    AddWriter.Dispose();
                    addFile.Dispose();
                }
                DeleteFolder(sourcePath);
                context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"savePath\" :\"" + System.Web.HttpUtility.UrlEncode(targetPath) + "\"}");
                //context.Response.Write("{\"hasError\" : false}");
            }
            else
                context.Response.Write("{\"hasError\" : true}");
        }



        /// <summary>
        /// 删除文件夹及其内容
        /// </summary>
        /// <param name="dir"></param>
        private static void DeleteFolder(string strPath)
        {
            //删除这个目录下的所有子目录
            if (Directory.GetDirectories(strPath).Length > 0)
            {
                foreach (string fl in Directory.GetDirectories(strPath))
                {
                    Directory.Delete(fl, true);
                }
            }
            //删除这个目录下的所有文件
            if (Directory.GetFiles(strPath).Length > 0)
            {
                foreach (string f in Directory.GetFiles(strPath))
                {
                    System.IO.File.Delete(f);
                }
            }
            Directory.Delete(strPath, true);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
View Code

全局 跨域配置

 <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="*"/>
        <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS"/>
      </customHeaders>
    </httpProtocol>
  </system.webServer>
View Code

用 http://localhost:3504 代替 *,不安全。

地址是要上传的地方

目录
相关文章
|
存储 分布式计算 资源调度
ARM+麒麟大数据环境搭建:Hadoop
ARM+麒麟大数据环境搭建:Hadoop
3031 0
ARM+麒麟大数据环境搭建:Hadoop
|
4月前
|
安全
【📕分布式锁通关指南 07】源码剖析redisson利用看门狗机制异步维持客户端锁
Redisson 的看门狗机制是解决分布式锁续期问题的核心功能。当通过 `lock()` 方法加锁且未指定租约时间时,默认启用 30 秒的看门狗超时时间。其原理是在获取锁后创建一个定时任务,每隔 1/3 超时时间(默认 10 秒)通过 Lua 脚本检查锁状态并延长过期时间。续期操作异步执行,确保业务线程不被阻塞,同时仅当前持有锁的线程可成功续期。锁释放时自动清理看门狗任务,避免资源浪费。学习源码后需注意:避免使用带超时参数的加锁方法、控制业务执行时间、及时释放锁以优化性能。相比手动循环续期,Redisson 的定时任务方式更高效且安全。
221 24
【📕分布式锁通关指南 07】源码剖析redisson利用看门狗机制异步维持客户端锁
|
11月前
|
安全 Windows
搜狗输入法双击输入框崩溃问题
【8月更文挑战第27天】搜狗输入法双击输入框崩溃可能由多种因素造成,包括软件冲突、输入法版本问题、系统故障、设置错误及硬件问题。建议检查并解决潜在冲突软件,更新输入法版本,修复系统文件,调整输入法设置,以及确保硬件正常工作。通过逐步排查,通常可定位并解决问题。
423 0
|
6月前
|
供应链 算法 安全
探索区块链技术中的隐私保护机制
探索区块链技术中的隐私保护机制
258 27
|
8月前
|
机器学习/深度学习 弹性计算 编解码
阿里云服务器c7/c8a/c8y/c8i/g7/g8a/g8y/g8i/r7/r8a/r8y/r8i实例区别及选择参考
在阿里云目前的活动中,除了特价的轻量应用服务器和经济型e及通用算力型u1实例之外,属于计算型实例的实例有计算型c7/c8a/c8y/c8i,属于通用型实例的有通用型g7/g8a/g8y/g8i,属于内存型实例的有内存型r7/r8a/r8y/r8i。本文将详细介绍阿里云服务器中的c7、c8a、c8y、c8i、g7、g8a、g8y、g8i、r7、r8a、r8y、r8i等实例规格的性能、适用场景及选择参考,帮助用户更好地选择合适的云服务器实例。
|
11月前
|
存储 网络协议 Linux
在Linux中,如何通过syslog进行远程日志转发?
在Linux中,如何通过syslog进行远程日志转发?
|
数据采集 存储 数据挖掘
Python爬虫实战:打造一个简单的新闻网站数据爬取工具
本文将介绍如何运用Python编写一个简单而高效的网络爬虫,帮助您在实际项目中快速获取并存储新闻网站的数据。通过学习本文,您将了解到如何利用Python中的第三方库和技术来实现数据爬取,为您的数据分析和应用提供更多可能性。
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的外卖点餐系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的外卖点餐系统的详细设计和实现
157 0
|
前端开发 算法 JavaScript
2025年阿里招聘已放出,标题没错,就是2025年
机会总是留给有准备的人,话都懂,但真正做到,你至少领先80%的人,先说一个事,就在昨天,V哥帮公众号里的一个用户远程做了沟通,这位女生是长春某一本学校的在读大三学生,将于2025年毕业,从公众号里找到了V哥,暂且称她为小曦。
243 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问