第一种方法
前端：
<div>
单文件上传
<form enctype="multipart/form-data" method="post" action="upload.aspx">
<input type="file" name="files" />
<input type="submit" value="上传" />
</form>
</div>
后端：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class upload_upload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpContext context = HttpContext.Current;
context.Response.ContentType = "text/plain";
//获取所有的上传文件
//如果上传的文件超过了4M，则会报异常[超过了最大请求长度。]，需要在Web.config配置
HttpFileCollection hfc = context.Request.Files;
//如果是hfc.Count为0，则可以认为是直接请求该ashx处理程序
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
//大小限制
int maxSize = 2 * 1024 * 1024; //最大是2M(转换为字节)
if (hpf.ContentLength > maxSize)
{
context.Response.Write("上传文件大小超出限制");
return;
}
//扩展名限制
string[] exts = { "image/jpg", "image/jpeg", "image/gif", "image/png" };
if (!exts.Contains(hpf.ContentType.ToLower()))
{
context.Response.Write("必须上传图片文件");
return;
}
string fileName = Path.GetFileName(hpf.FileName);
hpf.SaveAs(context.Server.MapPath("~/upload/" + fileName));
}
}
获取指定name的文件上传
该方式如果是html5的<input type="file" name="files" multiple />则始终是获取第一个上传的文件，multiple
是支持多个文件上传，所以如果上传文件多于一个，则会丢失
//HttpPostedFile hpf = context.Request.Files["files"];
//if (hpf!= null && hpf.ContentLength > 0)
//{
// hpf.SaveAs(context.Server.MapPath("~/UpLoad/" + Path.GetFileName(hpf.FileName)));
//}
context.Response.Write("上传成功");
}
}
第二种方法
前端(1)
<div id="divImg">
<input type="file" class="file" name="file" multiple="multiple" id="file"/>
<button type="button" οnclick="uploadFile()">上传</button>
</div>
js
function uploadFile(){
let files = $("#file").prop("files");
let formData = new FormData();
// 对每个文件进行循环处理
for (let i = 0; i < files.length; i++) {
let file = files[i];
// 添加文件到formData
formData.append('files['+i+']', file, file.name);
}
$.ajax({
url: ctx + "/file/upload",
type: 'POST',
data: formData,
processData: false,
contentType: false,
async: false,
cache: false,
success: function(data) {
console.log(data);
}
});
}
前端（2）
js
<form id="fileUploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput">
<button type="submit">上传</button>
</form>
<script>
$(document).ready(function() {
$('#fileUploadForm').submit(function(e) {
e.preventDefault();
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var fileData = e.target.result;
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});
};
后端同每一种方法