在前端与后端交互,ajax是最常用的方式,而后台的响应也有很多方式,在asp.net中有一般处理程序和MVC的Controller响应的方式。在使用controller来响应请求时,可以通过路由配置来定位到具体的方法,这样代码清晰,逻辑分明,但前端传到后端的参数一般是通过函数的参数来接收的,而对于文件这样较大的数据,不太方便接收,虽然有类似HttpPostedFileBase的类作为参数,但使用ajax来与其交互时变的不易处理,那有什么其他的方法呢?
有的!
上传文件由于是数据量比较大的传输,所以使用ajax的post方法,在post的时候将数据放到FormData中,如果还有其他的参数要传输,为了便于后端的接收,我们可以将其放到URL的问号后面,而后端使用函数的参数来接收,只要标识为FromUri就可以了。文件数据传输时必然是要用multipart的方式来传的,后端也自然的要以这种方式来接收。由于Post文件数据是分断的,为了保证接收,我们后端使用Task来接收。我们来看具体的代码。
前端代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传</title>
<meta charset="utf-8" />
<link href="stylesheets/css.css" rel="stylesheet" />
<script src="scripts/zepto.min.js"></script>
</head>
<body>
<div class="all">
<div id="ajaxWait" class="mask">
<img src="images/loading.gif" />
</div>
<div class="head">
</div>
<div class="body">
<div class="body_style">
<div class="upload-container">
<div style="height:43px;">
<div class="upload-wrap">
<input type="file" id="file1" class="upload-pic" >
<span class="upload-text">
选择图片1
</span>
</div>
</div>
<div class="upload-preview-wrap">
<img id="fileStylePreview" class="upload-preview-img" />
</div>
</div>
<div class="upload-container">
<div style="height:43px;">
<div class="upload-wrap">
<input type="file" id="file2" class="upload-pic" >
<span class="upload-text">
选择图片2
</span>
</div>
</div>
<div class="upload-preview-wrap">
<img id="fileWearPreview" class="upload-preview-img" />
</div>
</div>
<div style="margin-bottom:5px;margin-top:5px;">
<label>类型</label>
<select id="clothesType" style="width:90px;height:30px;">
<option value="Type1" selected="selected">类型1</option>
<option value="Type1">类型2</option>
</select>
</div>
<div>
<input type="button" value="上传" id="btnUpload" class="upload-wrap " />
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$("#btnUpload").click(function () {
$("#ajaxWait").show();
var formData = new FormData();
formData.append("file1", document.getElementById("file1").files[0]);
formData.append("file2", document.getElementById("file2").files[0]);
var type = $("#clothesType").val();
$.ajax({
url: "/api/MyFiles/Upload?type=" + type,
type: "POST",
data: formData,
contentType: false,//必须false才会自动加上正确的Content-Type
processData: false,//必须false才会避开jQuery对 formdata 的默认处理.XMLHttpRequest会对 formdata 进行正确的处理.
success: function (data) {
$("#ajaxWait").hide();
if (data.Status == 0) {
alert("上传成功!");
}
else {
alert(data.Message);
}
},
error: function (data) {
$("#ajaxWait").hide();
alert("上传失败!" + data.Message);
}
});
});
function fileInputChang(obj) {
var id = obj.target.id;
var files = document.getElementById(id).files;
var img = document.getElementById(id + "Preview");
if (!files || files.length <= 0) {
img.src = "";
return;
}
var file;
if (files && files.length > 0) {
// 获取目前上传的文件
file = files[0];
// 那么我们可以做一下诸如文件大小校验的动作
if (file.size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
return false;
}
// 图片预览 function 1
if (window['FileReader']) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
}
var reader = new FileReader();
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function (e) {
//图片路径设置为读取的图片
img.src = this.result;
};
reader.readAsDataURL(file);
}
}
$("#fileStyle").change(fileInputChang);
$("#fileWear").change(fileInputChang);
});
</script>
后端代码
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
namespace UploadDemo.Controllers
{
public class MyFilesController : ApiController
{
#region Upload
[HttpPost]
public BaseDataPackage<string> Upload([FromUri]TryClothesTypeEnum type)
{
var result = new BaseDataPackage<string>();
if (!Request.Content.IsMimeMultipartContent())
{
result.Status = StatusCode.Fail;
result.Message = "Data Invalid";
result.Data = null;
return result;
}
var server = HttpContext.Current.Server;
string webRoot = "~/Upload/" + type.ToString();
string physicsRoot = server.MapPath(webRoot);//保存上传文件的目录
if (!Directory.Exists(physicsRoot))
{
Directory.CreateDirectory(physicsRoot);
}
var provider = new RenameMultipartFormDataStreamProvider(physicsRoot);
IEnumerable<HttpContent> parts = null;
Task.Factory
.StartNew(() =>
{
parts = Request.Content.ReadAsMultipartAsync(provider).Result.Contents;
},
CancellationToken.None,
TaskCreationOptions.LongRunning, //确保线程分离
TaskScheduler.Default)
.Wait();
try
{
result.Status = StatusCode.OK;
result.Message = "OK";
result.Data = null;
}
catch (Exception ex)
{
result.Status = StatusCode.Fail;
result.Message = ex.Message;
result.Data = null;
}
return result;
}
#region RenameMultipartFormDataStreamProvider
/// <summary>
/// 重命名上传的文件
/// </summary>
public class RenameMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
{
#region 属性
/// <summary>
/// 上传的文件名列表
/// </summary>
public List<string> FileNameList { get; set; } = new List<string>();
#endregion
public RenameMultipartFormDataStreamProvider(string root)
: base(root)
{ }
public override string GetLocalFileName(HttpContentHeaders headers)
{
//截取文件扩展名
string ext = Path.GetExtension(headers.ContentDisposition.FileName.TrimStart('\"').TrimEnd('\"'));
string fileName = Guid.NewGuid().ToString().ToUpper() + ext; //base.GetLocalFileName(headers);
if (!FileNameList.Contains(fileName))
{
FileNameList.Add(fileName);
}
return fileName;
}
}
#endregion
#endregion
}
}
其中RenameMultipartFormDataStreamProvider是对上传文件进行重命名的类,继承自MultipartFormDataStreamProvider,MultipartFormDataStreamProvider会自动将上传的文件数据合并成FileStream,并会写入到重命名的所命名的文件中,为了便于调取文件名,特别增加了一个FileNameList属性来保存上传文件的原始文件名。
基本的数据包类/// <summary>
/// 基本数据包
/// </summary>
public class BaseDataPackage<T>
{
/// <summary>
/// 状态(参见<seealso cref="StatusCode"/>)
/// </summary>
public int Status { get; set; }
/// <summary>
/// 信息
/// </summary>
public string Message { get; set; }
/// <summary>
/// 具体数据
/// </summary>
public T Data { get; set; }
#region IsOK Function
/// <summary>
/// 是否OK
/// </summary>
/// <returns></returns>
public bool IsOK()
{
return Status == 0;//StatusCode.OK;
}
#endregion
}
状态类
public class StatusCode
{
public const int OK = 0;
public const int Fail = -1;
}
附上用到的CSS样表
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(/images/bg.jpg);
}
.all {
height: 740px;
width: 980px;
margin: auto;
}
.head {
height: 66px;
width: 980px;
float: left;
}
.body {
height: 596px;
width: 980px;
float: left;
}
.body_style {
height: 596px;
width: 262px;
float: left;
background-image: url(images/body_02.jpg);
}
.footer {
height: 78px;
width: 980px;
float: left;
}
.upload-preview-wrap {
border: 1px solid;
width: 100px;
height: 120px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.upload-preview-img{
width:100px;
height:120px;
}
.upload-wrap {
position: relative;
width: 158px;
height: 43px;
font-size: 16px;
border: 1px solid #cacbcc;
line-height: 43px;
margin: 0 auto;
color: #fff;
text-align: center;
background: #3385ff;
border-bottom: 1px solid #2d78f4;
float: left;
}
.upload-pic {
position: absolute;
font-size: 0;
width: 100%;
height: 100%;
outline: 0;
opacity: 0;
filter: alpha(opacity=0);
margin-left: -18px;
z-index: 1;
cursor: pointer;
}
.upload-container {
height:180px;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
z-index: 998;
display: none;
text-align:center;
padding-top:10%;
}
转载请注明出处