试了很多方式,最终确认这个全面简单版的。废话不多说,贴码。

文件上传

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# 前后台交互文件上传、下载的更多相关文章

  1. nodejs+express-实现文件上传下载管理的网站

    Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...

  2. SpringMVC(三) RESTful架构和文件上传下载

    RESTful架构 REST全名为:Representational State Transfer.资源表现层状态转化.是目前最流行的一种互联网软件架构. 它结构清晰.符合标准.易于理解.扩展方便,所 ...

  3. SpringMVC文件上传下载(单文件、多文件)

    前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...

  4. 2013第38周日Java文件上传下载收集思考

    2013第38周日Java文件上传&下载收集思考 感觉文件上传及下载操作很常用,之前简单搜集过一些东西,没有及时学习总结,现在基本没啥印象了,今天就再次学习下,记录下自己目前知识背景下对该类问 ...

  5. 文件上传下载样式 --- bootstrap

    在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框 ...

  6. HttpClient文件上传下载

    1 HTTP HTTP 协议可能是如今 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序须要直接通过 HTTP 协议来訪问网络资源. 尽管在 JDK 的 java.net ...

  7. JavaWeb 文件 上传 下载

    文件上传下载对于一个网站来说,重要性不言而喻.今天来分享一个JavaWeb方式实现的文件上传下载的小例子. 项目依赖 项目目录 工作流程 文件上传 表单处的设置 服务器端 上传功能的实现 upload ...

  8. java实现文件上传下载

    喜欢的朋友可以关注下,粉丝也缺. 今天发现已经有很久没有给大家分享一篇技术文章了,于是想了一下给大家分享一篇java实现文件上传下载功能的文章,不喜欢的希望大家勿喷. 想必大家都知道文件的上传前端页面 ...

  9. Nginx + Lua搭建文件上传下载服务

    收录待用,修改转载已取得腾讯云授权 最新腾讯云技术公开课直播,提问腾讯W3C代表,如何从小白成为技术专家?点击了解活动详情 作者 | 庄进发 编辑 | 迷鹿 庄进发,信息安全部后台开发工程师,主要负责 ...

随机推荐

  1. SQL Server存储过程邮件发送以表格方式发送

    一.收到邮件显示:示例 二.存储过程代码部分: BEGIN SET NOCOUNT ON; --初始化 Declare @MailTo nvarchar(max) Declare @MailCc nv ...

  2. FPGA高速ADC接口实战——250MSPS采样率ADC9481

    一.前言 最近忙于硕士毕业设计和论文,没有太多时间编写博客,现总结下之前在某个项目中用到的一个高速ADC接口设计部分.ADC这一器件经常用于无线通信.传感.测试测量等领域.目前数字系统对高速数据采集的 ...

  3. pytest进阶之xunit fixture

    前言 今天我们再说一下pytest框架和unittest框架相同的fixture的使用, 了解unittest的同学应该知道我们在初始化环境和销毁工作时,unittest使用的是setUp,tearD ...

  4. python3 生成器初识 NLP第五条

    话不多说,先把第五条抄一遍: 五,沟通的意义在于对方的回应 沟通没有对与错,只有“有效果”或者“没有效果”之分. 自己说得多“对”没有意义,对方收到你想表达的讯息才是沟通的意义. 因此自己说什么不重要 ...

  5. SpringBoot2.0之八 多数据源配置

     在开发的过程中我们可能都会遇到对接公司其他系统等需求,对于外部的系统可以采用接口对接的方式,对于一个公司开发的两个系统,并且知道相关数据库结构的情况下,就可以考虑使用多数据源来解决这个问题.Spri ...

  6. springboot打包不同环境配置与shell脚本部署

    本篇和大家分享的是springboot打包并结合shell脚本命令部署,重点在分享一个shell程序启动工具,希望能便利工作: profiles指定不同环境的配置 maven-assembly-plu ...

  7. qml demo分析(objectlistmodel-自定义qml数据)

    一.效果展示 如图1所示,是一个ListView窗口,自定义了文本内容和项背景色. 图1 ListView 二.源码分析 代码比较简单,主要使用了QQmlContext类的setContextProp ...

  8. .Net Webapi SignalR与微信小程序的交互

    .Net Webapi SignalR与微信小程序的交互 一.SignalR与Webapi 1.SignalR的安装: Signalr与跨域仅需要安装两个开源库 Microsoft.Owin.Cors ...

  9. TabTopLayout【自定义顶部选项卡区域(固定宽度且居中)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...

  10. 知识小罐头08(tomcat8启动源码分析 上)

    前面好几篇都说的是一个请求是怎么到servlet中的service方法的,这一篇我们来看看Tomcat8是怎么启动并且初始化其中的组件的? 相信看了前面几篇的小伙伴应该对Tomcat中的各个组件不陌生 ...