前端通信:ajax设计方案(三)--- 集成ajax上传技术

简介: 在此之前让我感慨一下现在的前端开发的氛围。我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了。其实我想问,东西都框架做了,那你会什么?会吹牛逼?会撕逼?我在简历上写专注原声js,曾经被几个人笑过。

在此之前让我感慨一下现在的前端开发的氛围。我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了。其实我想问,东西都框架做了,那你会什么?会吹牛逼?会撕逼?

我在简历上写专注原声js,曾经被几个人笑过。我一直搞不懂,框架会过时,基础永远不会过时。离了框架,我可以活,我也会自己写框架,我也在前端模块化的路上自己摸索着,我也在前端如何更简单,更快速开发的路上摸索着。难道有框架做了,我就坐吃山空等死吗?

前端太浮躁,我也无所谓成为别人眼中的奇葩。我去做前端,我去做分离,我去写后端,每天总会花一些时间在我喜欢的东西上。我知道我很傻逼,有的玩不玩,还去看代码。那我没办法,我做奇葩很长时间了,因为我有自己的梦想,我有自己的追求。

请不要在我面前说,你这个东西人家都做了。做了怎么了?人家做了,是你的吗?人家做的时候前面不也有千千万万个死的淘汰的东西吗?难道就因为人家做了我就不干了?请不要目光短浅。鄙人也不隐藏我为什么做前端,现在列举我做前端的理由,你和我一样吗?

    1. 对接UI,需要涉猎页面设计,布局和美化。学会去审美,学会站在用户角度去看自己的东西。当然我不否认,UI妹子也多
    2. 对接js,对前端核心技术的考验。对于页面功能实现、新旧技术兼容和舍弃、如何写出高效可维护代码的思考
    3. 对接架构,前端性能优化,程序健壮性和容错性,各种框架资源整合使用,从DNS解析到页面渲染到你眼前的各种过程的跨域学习
    4. 对接后端,新老技术的变化,永远不是前端,后端一样需要去配合着去改变。所以懂后端,设计后端,写后端,永远都需要你去懂得
    5. 对接服务器,反向代理,负载均衡,请求分发容错整合等等难道不需要懂吗?难道只敲个js就够了?
    6. 前端的未来,任何项目的使用和展示,都离不开前端。因为前端第一接触是用户,是发展的最核心的资源。前端是站在整个战线第一线的。
    7. 最重要的。前端刚起步,不是很成熟,可以接触所有的原声和底层,优化,开发,调试,甚至改变世界,都是有可能的。后端太成熟,接触太多都是框架,突出重围,需要更深的积累和叛逆。
    8. 最重要的,前端相对来说,薪水前期还是很好的。毕竟还要生活,诗和远方都不及面包重要,活着,一切才有可能。

 

  之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询。这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看。我们直接切入主题。

 

概念介绍:

  1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码。

  

 

  2. 浏览器的支持:浏览器已支持input=file的时候查看文件,具体包括文件的大小(size)和类型(type),浏览器测试如下

 

  3. xmlhttprequest:支持发送(send方法)新的数据类型,包括DOMStringDocumentFormDataBlobFileArrayBuffer。具体参见ajax设计方案的规范

 

工具准备:

  1. 前端代码

  2. nginx服务器(分离)

  3. IIS服务器(部署后台)

  4. 后台代码(webAPI)

 

什么不多说,先贴代码:

前端代码:

        /*
        *   ajax上传文件
        *       url                 文件上传地址
        *       fileSelector        input=file 选择器(支持多文件上传,只要后台接口支持)
        *       size                文件限制大小
        *       fileType            文件限制类型 mime类型
        *       success             上传成功处理
        *       error               上传失败处理
        *       timeout             超时处理
        *
        *   return: status:  0      请选择文件
        *                    1      超出文件限制大小
        *                    2      非允许文件格式
        * */
        upload:function(url,fileSelector,size,fileType,success,error,timeout){
            var formdata = new FormData(),fileNode = document.querySelector(fileSelector),fileCount = fileNode.files.length,data={},result ={};
            //以下为上传文件限制检查
            if ( fileCount > 0 ){
                tool.each(Array.prototype.slice.call(fileNode.files),function(value){
                    //检查文件大小
                    if (value.size > size){
                        result["status"] = 1;
                        result["errMsg"] = "超出文件限制大小";
                    }else{
                        //检查文件格式.因为支持formdata,自然支持数组的indexof(h5)
                        if (fileType.indexOf(value.type)=== -1 ){
                            result["status"] = 2;
                            result["errMsg"] = "非允许文件格式";
                        }else{
                            formdata.append(value.name,value);
                        };
                    };
                });
            }else{
                result["status"] = 0;
                result["errMsg"] = "请选择文件";
            };

            if (result.status !== undefined)  return result;   //如果有错误信息直接抛出去,结束运行

            var ajaxParam ={
                type:"post",
                url:url,
                data:formdata,
                isFormData:true,
                success:success,
                error:error,
                timeout:timeout
            };
            ajax.common(ajaxParam);
        },
    };

后端接口代码(C#的webAPI),代码比较简陋,能完成测试就好

    [Route("upload3")]
        public async Task<HttpResponseMessage> PostFormData()
        {
            // Check if the request contains multipart/form-data.
            // 检查该请求是否含有multipart/form-data
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

            string root = HttpContext.Current.Server.MapPath("~/uploadfile");
            var provider = new ReNameMultipartFormDataStreamProvider(root);

            try
            {
                // Read the form data.
                // 读取表单数据
                var task = await Request.Content.ReadAsMultipartAsync(provider).ContinueWith(t =>
                {
                    if (t.IsFaulted || t.IsCanceled)
                    {
                        Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
                    }
                    string fileName = string.Empty;
                    foreach (MultipartFileData file in provider.FileData)
                    {
                        fileName = file.LocalFileName;
                    }
                    //返回上传后的文件全路径
                    return new HttpResponseMessage() { Content = new StringContent(fileName) };
                });
                return Request.CreateResponse(HttpStatusCode.OK);
            }
            catch (System.Exception e)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
            }
        }

        ///
        /// 重命名上传的文件
        ///
        public class ReNameMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
        {
            public ReNameMultipartFormDataStreamProvider(string root)
                : base(root)
            { }
            public override string GetLocalFileName(System.Net.Http.Headers.HttpContentHeaders headers)
            {
                //截取文件扩展名
                string exp = Path.GetExtension(headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"'));
                string name = base.GetLocalFileName(headers);
                return name + exp;
            }
        }

 

浏览器测试结果(几乎所有主流浏览器都支持,除了IE10以下)

测试代码如下:

            var temp = ajax.upload("/api/ajaxUpload/upload3/", "#file1", 1024 * 1024 * 1, ["image/png","image/bmp"], function (data) {
                if (data == "true") {
                    alert("上传成功!");
                }
                if (data == "error") {
                    alert(data);
                }
            });
            console.log(temp);

格式限制测试结果如下

1. 选取超过限制大小的文件

2. 选取非允许格式的文件

3. 未选择上传文件

 

 

文件上传成功测试

IE10、11

safari

火狐

谷歌

opera

edge

360浏览器

 

 

 下面扯一下遇到的问题

  问题一  IE8-9兼容问题

在兼容性网站(http://caniuse.com/)查询兼容性,ajax leve2支持IE10+版本,所以如果在IE8-9上使用纯前端代码进行上传文件的话,只有传统的form标签

html代码如下:

<form id="formUpload" action="/api/ajaxUpload/upload2/" method="post" enctype="multipart/form-data" target="framFile">
    <input name="isIE8" type="text" value="1" readonly style="display: none"/>
    <input id="iefile" type="file" name="age"/>
    <input type="submit" value="submit">
</form>
<iframe id="framFile" name="framFile" src="postMsg.html"></iframe>

缺点:

1. 每次form提交的时候都会刷新页面,如果想做异步无刷新,用iframe做提交页面

2. IE8-9无法在前端对文件进行大小和类型检查(使用IE的文件组件不安全,因为可以修改系统上所有文件,容易被攻击,而且浏览器都是默认关闭的)

3. 上传文件接口不能有返回值,否则在IE8下会将接口返回值作为文件下载下来,且无法取得返回值(用了N种方法),但是在其他浏览器中ajax的成功事件会去做判断,测试图片如下 

一些建议:如果真的要做IE8-9,现在普遍的方案是将flash插件和ajax Level2的上传进行组合,支持H5的用ajax上传,不支持初始化flash上传插件。

PS:对于那些偏执的,一定要在IE8-9用纯前端代码支持上传的,还有一种折中的方案,和这种思想类似,但是我做了优化,思路如下:

需要2个接口:上传文件接口,IE8-9下上传结果查询接口

a. 首先使用form的无刷新上传(ifarme)

b. 后台接收到formdata数据判断是否是IE8-9的上传,是的话将该用户上传文件是否成功的状态改变(不管存库或者其他地方),否则直接返回上传结果

c. 前端在form的submit之后,发起得到一次结果的轮询,如果得到结果,则直接结束轮询,结果查询接口也将该用户的上传文件状态清空

 

  问题二  一般ajax请求和formdata请求,后台取值问题。

传统http请求,可以直接在接口参数中取得数据,但是使用formdata进行ajax请求的话,后台接口需要从formdata对象中取数据,包括文件啥的。因为这个我写后台接口的时候就懵逼了好长一段时间,然后左查查右查查,终于明白取值方式也不一样了。

 

  问题三  关于formdata上传文件,具体能上传多大文件的限制问题

上传文件的限制取决于web容器可接受上传文件的大小,tomcat、IIS等web容器都有自己的设置方法,具体可搜索引擎,你懂的

 

  问题四  前端对大文件的传输解决方案,具体可参考该文章

在新的版本中,就是支持H5的版本中,有了File对象可以切割文件,因为在取到input=file中取到的文件都是File类型,File对象有个方法slice,可以切割文件,然后分配一个xhr上传。主要是后台的切割文件重组问题不是很清楚,所以我暂时也没有集成大文件上传方法。

 

 代码已集成github:https://github.com/GerryIsWarrior/ajax     点颗星星是我最大的鼓励,有什么问题可以博客、邮箱、github上留言

 

这一次上传版本,代码做过变动,变动如下:

  1. 增加FormData数据传输方法(postFormData),如果判断到浏览器不支持FormData,则自动使用默认原始的数据传输
  2. 新增各种类型判断方法,判断类型
  3. 更新each方法,判断如果传入参数obj为数组而且浏览器支持h5的新特性直接用数组的forEach方法

 

我的全栈书签,这次更新整理了国内顶级互联网和著名的一些互联网公司的招聘网站,希望大家找到好工作,^_^

github地址:https://github.com/GerryIsWarrior/MyBookmarks

 

目录
相关文章
|
11天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
29天前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
52 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
机器学习/深度学习 前端开发 搜索推荐
未来趋势下的前端开发技术探索
随着人工智能和物联网技术的快速发展,前端开发领域也面临着新的挑战和机遇。本文将探讨未来趋势下前端开发技术的发展方向和应用场景,为广大前端开发者提供启示与思路。
|
7天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
21天前
|
编解码 前端开发 JavaScript
探索前端开发中的新趋势:WebAssembly 技术应用与展望
本文将深入探讨前端开发中的新趋势——WebAssembly 技术,介绍其在前端领域的应用场景和优势,并展望未来在前端开发中的潜在影响。通过对 WebAssembly 技术的原理解析和实际案例分析,帮助读者更好地了解并应用这一新兴技术。
|
23天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。
|
29天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。
|
1月前
|
前端开发 JavaScript Java
|
1月前
|
机器学习/深度学习 人工智能 前端开发
探索未来的前端开发趋势:WebAssembly 技术的崛起
随着互联网的快速发展,前端开发的需求也日益增长。本文将深入探讨一项引起广泛关注的新兴技术——WebAssembly,探索其在前端开发中的应用以及对未来的影响。
|
1月前
|
Rust 前端开发 vr&ar
未来前端技术发展趋势分析
在数字化时代,前端技术一直处于快速发展的状态。本文将从WebAssembly、PWA、AR/VR等方面探讨未来前端技术的发展趋势,为读者揭示前端技术的新篇章。