前端/C# 前后台交互文件上传、下载
试了很多方式,最终确认这个全面简单版的。废话不多说,贴码。
文件上传
input的type命名为file,即可实现文件上传。嗯~~~现在html还是很强大的。Good!
前端
单个文件上传
Html:
<form id="form1">
<input type="file" name="files" />
<input type="button" value="单文件上传" onclick="uploadFile()"/>
</form>
Jquery:
在此基础上,需要引用两个js文件:
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.form.js"></script>
function uploadFile() {
$("#form1").ajaxSubmit({
url: "@Url.Action("UploadFile", "Home")", //这里也可以写成:"/Home/UploadFile",其中Home是Controller的名字;UploadFile是方法名字
type: "post",
success: function (data) {
if (data == "True" || data == true) {
}
else {
}
},
error: function (aa) {
}
});
}
多文件上传
Html:
<form enctype="multipart/form-data" id="form_example">
<input type="file" id="files" multiple onchange="addFile()"/><br /><br />
<input type="button" value="提交" id="submit" onclick="submitFile()" />
</form>
<div id='file-list-display'></div>
JS:
var fileList = [];
function addFile() {
var files = document.getElementById("files"),
fileListDisplay = document.getElementById('file-list-display');
for (var i = 0; i < files.files.length; i++) {
fileList.push(files.files[i]);
}
fileListDisplay.html = '';
fileList.forEach(function (file, index) {
var fileDisplayEl = document.createElement("p");
fileDisplayEl.innerHTML = (index + 1) + ":" + file.name;
fileListDisplay.appendChild(fileDisplayEl);
})
}
function submitFile() {
var formData = new FormData();
//循环添加到formData中
fileList.forEach(function (file) {
formData.append('files', file, file.name);
})
$.ajax({
url: "/Home/UploadFile",
type: 'POST',
data: formData,
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
async: false,
success: function (data) {
if (data) {
}
}
});
}
后台(C#)
/// <summary>
/// 文件上传到本地
/// </summary>
public void Upload()
{
try
{
HttpFileCollection hpFiles = HttpContext.Current.Request.Files;
for (int i = ; i < hpFiles.Count; i++)
{ if (hpFiles[i] == null || hpFiles[i].FileName.Trim() == "")
{
_Error = ;
return;
}
string Ext = GetExt(hpFiles[i].FileName);
//if (!IsUpload(Ext))
//{
// _Error = 2;
// return;
//}
int iLen = hpFiles[i].ContentLength;
if (iLen > _MaxSize)
{
_Error = ;
return;
} if (!Directory.Exists(_SavePath)) Directory.CreateDirectory(_SavePath);
byte[] bData = new byte[iLen];
hpFiles[i].InputStream.Read(bData, , iLen);
string FName;
if (_IsChangeName)
{
FName = NewFileName(Ext);
}
else
{
FName = hpFiles[i].FileName;
}
FileStream newFile = new FileStream(_SavePath + FName, FileMode.OpenOrCreate);
newFile.Write(bData, , bData.Length);
newFile.Flush();
int _FileSizeTemp = hpFiles[i].ContentLength; string ImageFilePath = _SavePath + FName; newFile.Close();
newFile.Dispose();
_FileName = hpFiles[i].FileName;
_OutFileName = FName;
_FileSize = _FileSizeTemp;
}
_Error = ;
return;
}
catch (Exception ex)
{
_Error = ;
return;
}
}
源码下载:https://files.cnblogs.com/files/pukua/UploadDemo.zip
前端/C# 前后台交互文件上传、下载的更多相关文章
- nodejs+express-实现文件上传下载管理的网站
Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...
- SpringMVC(三) RESTful架构和文件上传下载
RESTful架构 REST全名为:Representational State Transfer.资源表现层状态转化.是目前最流行的一种互联网软件架构. 它结构清晰.符合标准.易于理解.扩展方便,所 ...
- SpringMVC文件上传下载(单文件、多文件)
前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...
- 2013第38周日Java文件上传下载收集思考
2013第38周日Java文件上传&下载收集思考 感觉文件上传及下载操作很常用,之前简单搜集过一些东西,没有及时学习总结,现在基本没啥印象了,今天就再次学习下,记录下自己目前知识背景下对该类问 ...
- 文件上传下载样式 --- bootstrap
在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框 ...
- HttpClient文件上传下载
1 HTTP HTTP 协议可能是如今 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序须要直接通过 HTTP 协议来訪问网络资源. 尽管在 JDK 的 java.net ...
- JavaWeb 文件 上传 下载
文件上传下载对于一个网站来说,重要性不言而喻.今天来分享一个JavaWeb方式实现的文件上传下载的小例子. 项目依赖 项目目录 工作流程 文件上传 表单处的设置 服务器端 上传功能的实现 upload ...
- java实现文件上传下载
喜欢的朋友可以关注下,粉丝也缺. 今天发现已经有很久没有给大家分享一篇技术文章了,于是想了一下给大家分享一篇java实现文件上传下载功能的文章,不喜欢的希望大家勿喷. 想必大家都知道文件的上传前端页面 ...
- Nginx + Lua搭建文件上传下载服务
收录待用,修改转载已取得腾讯云授权 最新腾讯云技术公开课直播,提问腾讯W3C代表,如何从小白成为技术专家?点击了解活动详情 作者 | 庄进发 编辑 | 迷鹿 庄进发,信息安全部后台开发工程师,主要负责 ...
随机推荐
- 再谈AbstractQueuedSynchronizer3:基于AbstractQueuedSynchronizer的并发类实现
公平模式ReentrantLock实现原理 前面的文章研究了AbstractQueuedSynchronizer的独占锁和共享锁,有了前两篇文章的基础,就可以乘胜追击,看一下基于AbstractQue ...
- AI - 深度学习之美十四章-概念摘要(8~14)
原文链接:https://yq.aliyun.com/topic/111 本文是对原文内容中部分概念的摘取记录,可能有轻微改动,但不影响原文表达. 08 - BP算法双向传,链式求导最缠绵 反向传播( ...
- hadoop rpc协议客户端与服务端的交互流程
尽管这里是hadoop的rpc服务,但是hadoop还是做到了一次连接仅有一次认证.具体的流程待我慢慢道来. 客户端:这里我们假设ConnectionId对应的Connection并不存在.在调用ge ...
- 《深入理解Java虚拟机》-----第6章 类文件结构——Java高级开发必须懂的
代码编译的结果从本地机器码转变为字节码,是存储格式发展的一小步,却是编程语言发展的一大步. 6.1 概述 记得在第一节计算机程序课上我的老师就讲过:“计算机只认识0和1,所以我们写的程序需要经编译器翻 ...
- ASP.NET Core中使用GraphQL - 第六章 使用EF Core作为持久化仓储
ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间件 ASP ...
- 【Android Studio安装部署系列】三十、从Android studio2.2.2升级到Android studio3.0之路
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 Android Studio 3.0的新功能 https://mp.weixin.qq.com/s/2XmVG4mKEDX6-bvZ ...
- NotificationSetUtilDemo【判断APP通知栏权限是否开启,以及如何跳转到应用程序设置界面】
前言 当APP有推送功能时,需要判断当前app在手机中是否开启了允许消息推送,否则即使添加了推送代码仍然收不到通知. 效果图 oppo上的效果: 使用步骤 一.项目组织结构图 注意事项: 1. 导入 ...
- 玩转Spring Cloud之API网关(zuul)
最近因为工作原因,一直没有空写文章,所以都是边忙项目,边利用空闲时间,周末时间学习总结,最终在下班回家后加班加点写完本篇文章,若有不足之处,还请谅解,谢谢! 本文内容导航: 一.网关的作用 二.网关与 ...
- Springboot 系列(八)动态Banner与图片转字符图案的手动实现
使用过 Springboot 的对上面这个图案肯定不会陌生,Springboot 启动的同时会打印上面的图案,并带有版本号.查看官方文档可以找到关于 banner 的描述 The banner tha ...
- KVO讲解
最近一直在写swift项目,没有时间更新自己的技术博客,以前在博客里面写过KVO的底层原理,今天我们来看一下KVO的整个使用过程和使用场景(附有demo),大约花大家10-15分钟时间,希望大家看完博 ...