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

文件上传

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. 「技巧」如何将Sketch改为深色模式

    之前Sketch只能根据mac系统的外观设置变更皮肤.在更新了版本54之后,可以脱离操作系统,在自己的偏好设置中更改外观了. 准备 Sketch 54 更多工具:whose.design 第一步:打开 ...

  2. OutOfMemoryError/OOM/内存溢出异常实例分析--堆内存溢出

    Java堆内存溢出 只要不断创建对象,并且保证GC Roots到对象之间有可达路径来避免垃圾回收机制清除这些对象, 那么在对象数量到达最大堆的容量限制后就会产生内存溢出异常,代码如下: import ...

  3. 转://IO的基础概念

    磁盘IO.网络IO 对磁盘的每个IO就是在磁盘与一些RAM单元之间相互传送一些相邻的扇区的内容.   磁盘IO延时(IO Latency):         也称为IO响应时间,是指内核对磁盘发出一个 ...

  4. ReactiveSwift源码解析(六) SignalProtocol的take(first)与collect()延展实现

    上篇博客我们聊了observe().map().filter()延展函数的具体实现方式以及使用方式.我们在之前的博客中已经聊过,Signal的主要功能是位于SignalProtocol的协议延展中的, ...

  5. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  6. 手把手安装Laravel框架(permissions扩展包)实现RBAC权限---以及一些安装时的ERROR

    a.依赖管理工具,框架,环境 1.composer 2.laravel(我的是5.5) 3.PHP(我的7.2),MySql(我的5.7) b,安装 1.首先需要安装一个干净的 Laravel 项目, ...

  7. 从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇:基于Vuex的权限验证探究

    缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候 ...

  8. 【自然语言处理篇】--以NLTK为基础讲解自然语⾔处理的原理和基础知识

    一.前述 Python上著名的⾃然语⾔处理库⾃带语料库,词性分类库⾃带分类,分词,等等功能强⼤的社区⽀持,还有N多的简单版wrapper. 二.文本预处理 1.安装nltk pip install - ...

  9. dev treelist和searchcontrol组合模糊查询用法

    这里需要用到两个控件,是dev的treelist和searchcontrol,首先呢树形控件要形成树形我在这就不多说了 因为这里是记录下searchcontrol这控件的用法 首先写这三行代码,里面都 ...

  10. C# Net MVC 大文件下载几种方式、支持速度限制、资源占用小

    上一篇我们说到大文件的分片下载.断点续传.秒传,有的博友就想看分片下载,我们也来总结一下下载的几种方式,写的比较片面,大家见谅^_^. 下载方式: 1.html超链接下载: 2.后台下载(四种方法:返 ...