框架基础：ajax设计方案（三）---集成ajax上传技术

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

我在简历上写专注原声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方法）新的数据类型，包括DOMString、Document、FormData、Blob、File、ArrayBuffer。具体参见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;
}
}