JQ 上传文件(单个,多个,分片)

<div>
<span>最原始的方式</span><br />
<span>条件1:必须是 post 方式</span><br />
<span>条件2:必须注明是传输文件 enctype="multipart/form-data"</span><br />
<span>条件3:必须设置name属性,name="myFile"</span><br />
<form id="myForm1" method="post" enctype="multipart/form-data" action="http://localhost:42561/api/upload/upload">
<input type="file" name="myFile" />
<input type="submit" value="原始form表单上传文件" />
</form>
</div>

public async Task<HttpResponseMessage> Upload()
{
var files = HttpContext.Current.Request.Files;
var path = HttpContext.Current.Server.MapPath("/img/");
if (files.Count > )
{
foreach (string file in files)
{
//这里的 file ,就是 input[type="file"] 标签的name属性的值,
//这也是为什么上传文件,input[type="file"] 标签必须设置name属性的值的原因之一.
var img = files[file];
if (img?.ContentLength > )
{
var fileName = img.FileName;
await Task.Run(() => img.SaveAs(path + fileName));
}
}
return new HttpResponseMessage(HttpStatusCode.OK);
}
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "没有文件");
}

<div>
<span>利用FormData上传单个文件</span><br />
<form id="myForm2">
<input type="file" name="myFile" />
<input type="button" value="利用FormData上传单个文件" onclick="uploadOne()" />
</form>
</div>

function uploadOne() {
var url = "http://localhost:42561/api/upload/upload"; //这里之所以会写成[0],是因为$(...)是JQ对象,是个数组,而这里需要传入的是JS对象.
var data = new FormData($("#myForm2")[0]);
$.ajax({
url: url,
data: data,
type: "post",
processData: false,//表示提交的时候不会序列化 data,而是直接使用 data,默认为 true
contentType: false,//表示不要去设置Content-Type请求头
cache: false,//设置为 false 将不会从浏览器缓存中加载请求信息。
success: function () { }
});
}

<div>
<span>利用FormData上传多个文件</span><br />
<form id="myForm3">
<input type="file" id="myFile" multiple />
<input type="button" value="利用FormData上传多个文件" onclick="uploadSome()" />
</form>
</div>

function uploadSome() {
var url = "http://localhost:42561/api/upload/upload"; var data = new FormData();
var files = $("#myFile")[0].files;
for (var i = 0; i < files.length; i++) {
//这里的 myFile0,myFile1,myFile2就是input type="file" 标签的name属性,所以标签里面可以不用写name属性了
data.append("myFile" + i, $("#myFile")[0].files[i]);
}
$.ajax({
url: url,
data: data,
type: "post",
processData: false,
contentType: false,
cache: false,
success: function () { }
});
}

<div>
<span>分片上传单个文件</span><br />
<form id="myForm4">
<input type="file" id="myFileStep" />
<input type="button" value="分片上传单个文件" onclick="uploadStep()"/>
</form>
<br />
<span class="result"></span>
</div>

function uploadStep() {
var upload = function (file, skip) {
var data = new FormData();
var blockSize = 1000;
var nextSize = Math.min((skip + 1) * blockSize, file.size);
var fileData = file.slice(skip * blockSize, nextSize);
data.append("myFile", fileData); //由于传输的是二进制数据(fileData),后台(MVC或者Api无法通过files[0].FileName获取文件名
//所以只能通过构造form表单数据传递(键值对形式,fileName=xxx.jpg&aaa=yyy),后台再通过request.Form[fileName]获取
data.append("fileName", file.name);
var url = "http://localhost:42561/api/upload/uploadStep";
$.ajax({
url: url,
type: "POST",
data: data,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function () {
$(".result").html("已经上传了" + (skip + 1) + "块文件");
if (file.size <= nextSize) { //如果上传完成，则跳出继续上传
alert("上传完成");
return;
}
upload(file, ++skip); //递归调用
}
});
};
var file = $("#myFileStep")[0].files[0];
upload(file, 0);
}

public HttpResponseMessage UploadStep()
{
var path = HttpContext.Current.Server.MapPath("/img/");
var name = HttpContext.Current.Request.Form["fileName"];
var filePath = path + name;
//创建一个追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
{
var file = HttpContext.Current.Request.Files[];
//方法一
using (BinaryWriter bw = new BinaryWriter(fs))
{
//读取文件流
BinaryReader br = new BinaryReader(file.InputStream);
//将文件流转成字节数组
byte[] bytes = br.ReadBytes((int)file.InputStream.Length);
//将字节数组追加到文件
bw.Write(bytes);
br.Dispose();
}
//方法二
//Stream sm = file.InputStream;
//byte[] bytes = new byte[sm.Length];
//sm.Read(bytes, 0, bytes.Length);
//fs.Write(bytes, 0, bytes.Length);
//sm.Dispose();
}
return new HttpResponseMessage(HttpStatusCode.OK);
}