文件上传是任何系统都必须具有的功能
- 设置上传按钮
<div style="height: 30px; width: 30%; float: right; position: relative; text-align: right; padding-right: 0px; ">
<img id="btnFileSelect" src="../Resources/camera29.png" alt="" style="position: relative;top:-34px" />
<div class="FileSelectHide">
<input id="upFile" name="upFile" type="file" onchange="UpLoadImg(this)" />
</div>
</div>
这个按钮是一个重叠的img和button 只显示img 也可以不要img直接显示input也可以 ,下面是样式。
.FileSelectHide {
width: 30px;
height: 32px;
overflow: hidden;
position: relative;
background-image: none;
background-attachment: scroll;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
margin-top: -34px;
float: right;
}
.FileSelectHide input {
height: 34px;
width: 50px;
right: 0px;
bottom: 0px;
font-size: 20px;
filter: alpha(opacity=0);
position: absolute;
cursor: pointer;
outline-width: medium;
outline-style: none;
outline-color: invert;
opacity: 0;
float: right;
}
2.添加点击事件
function UpLoadImg(file) {
//弹出对话框后选择文件 该文件会立即显示出来。然后在进行后台的处理
var oFReader = new FileReader();
oFReader.readAsDataURL(file.files[0]);
oFReader.onloadend = function (oFRevent) {
var src = oFRevent.target.result;
$("#showImg").attr("src", src);
}
///
var fileId = $("#upFile").attr("Id");
var url = '/Media/UploadImg';
//文件上传
ajaxFileUpload(fileId, url, null);
}
function ajaxFileUpload(elementId, url, sendData) {
var obj = {
url: url,//用于文件上传的服务器端请求地址
fileElementId: elementId,//文件上传空间的id属性
type: 'POST',
dataType: 'JSON',
data: sendData,
success: function (data, status) {
if (data.UpSucceed == 'True' && data.FileName != null) {
app.DetailContent.PicName = data.FileName;//将返回的文件名保存到vue的对象中
localStorage.setItem('img',data.FileName);//保存前的临时存储
mui.toast("上传成功");
} else {
$("#showImg").attr("src", '');
}
},
error: function (xhr, status, p3, p4) {
mui.toast("上传失败");
$("#showImg").attr("src", '');
}
};
$.ajaxFileUpload(obj);
return false;
}
说明:以上文件保存成功后返回的数据是通过一个视图完成的 文章链接https://blog.csdn.net/fwq_17802927858/article/details/97147607
2.后台接收处理
[HttpPost]
public ActionResult UploadImg()
{
int res = 0;
int length = Request.Files.Count;
if (length == 0)
return new EmptyResult();
var file = Request.Files[0];
var name = file?.FileName;
var folder = getPicFolderPath();
var savePath = folder + name;
try
{
if (!string.IsNullOrEmpty(folder))
{
if (!Directory.Exists(folder))
{
Directory.CreateDirectory(folder);
}
file?.SaveAs(folder + name);
res += 1;
}
}
catch (Exception ex)
{
res = 0;
throw ex;
}
var model = new FileModel();
model.FileName = name;
model.FilePath = savePath;
model.UpSucceed = res == 1;
return View("FileUpLoad", model);
}
说明:这个View:FileUpLoad就是保存返回的数据的FileModel,再ajax的success方法的参数data能够体现出来。 var folder = getPicFolderPath();这个路径是存储在数据库的系统配置的路径,可以是固定的。