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

文件上传

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. windows组策略实验-本地组策略和域控组策略

    windows组策略实验-本地组策略和域控组策略 本地组策略只对本地计算机有效,域策略是计算机加入域环境后对加入域的一组计算机.用户定义的策略,便于管理 本地组策略: 一.实验环境 Windows 7 ...

  2. 详解docker实战之搭建私有镜像仓库 - kurbernetes

    1.实战目的 搭建企业私有的镜像仓库,满足从开发环境推送和拉取镜像.当我们使用k8s来编排和调度容器时,操作的基本单位是镜像,所以需要从仓库去拉取镜像到当前的工作节点.本来使用公共的docker hu ...

  3. SpringMVC 参数传递和接收的几种方式

    普通传参 测试项目:SpringBoot2.0.不使用 form 表单传参,后端不需要指定 consumes . 使用 Postman 进行测试. @PathVariable 只能接收 URL 路径里 ...

  4. 编辑器开发之 Range 范围对象的学习

    写在前面: 网上有各种富文本编辑器,微博分享等操作,这些功能非常实用,他们就是使用 range,selection 对象来实现的,这两个对象偏冷门,不涉及编辑器一般用不到,range 对象是对选区的操 ...

  5. mysql的学习笔记(五)

    1.子查询,出现在其他SQL语句的SELECT子句 SELECT * FROM t1 WHERE col1=(SELECT col2 FROM t2); 第一个SELECT称为外层查询,第二个称为子查 ...

  6. SpringBoot进阶教程(二十二)集成RabbitMQ---MQ实战演练

    RabbitMQ是一个在AMQP基础上完成的,可复用的企业消息系统.他遵循Mozilla Public License开源协议.RabbitMQ是流行的开源消息队列系统,用erlang语言开发.Rab ...

  7. Nginx学习笔记~目录索引

    回到占占推荐博客索引 前几天整理了<Docker的学习笔记索引>,受到了很多朋友的关注,今天把Nginx的文章也整理一下,以后将永久更新,像大叔之前的<EF文章系列>,< ...

  8. 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  9. JavaScript一看就懂(2)闭包

    认识闭包之前需要先了解作用域,如果你对作用域还没有足够了解,请移步JavaScript一看就懂(1)作用域 什么是闭包? 我们可以先简单认为:一个函数a定义在另一个函数b里面,这个函数a就是闭包: f ...

  10. 使用logdashboard进行可视化的日志追踪

    本文源码在Github可以找到下载 LogDashboard 如果你还不了解LogDashboard请看这里. LogDashboard 1.1版本支持请求追踪,虽然目前版本还没有发布.不过这个功能可 ...