【上传】带进度条

view 

注:添加easyui的js文件

<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
var fileName = file.name;
var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);

if (file_typename == '.doc' || file_typename == '.docx') {//这里限定上传文件文件类型
if (file) {

$("#uploadFile").show();
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = '文件名: ' + file.name;
document.getElementById('fileSize').innerHTML = '大小: ' + fileSize;
document.getElementById('fileType').innerHTML = '类型: ' + file.type;
}
}
else {
$("#uploadFile").hide();
document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.doc后缀而不应该是" + file_typename + ",请重新选择文件</span>"
document.getElementById('fileSize').innerHTML = "";
document.getElementById('fileType').innerHTML = "";

}
}

function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var XMLHttp = null;
if (window.XMLHttpRequest) { //测试 window.XMLHttpRequest 对象是否可用
var xhr = new XMLHttpRequest(); //创建一个新对象
xhr.upload.addEventListener("progress", uploadProgress, false);
//监听事件
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "/Manage/Upload");
xhr.send(fd);
} else if (window.ActiveXObject) {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "/Manage/Upload");
xhr.send(fd);
}
}

//上传进度
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$('#progressNumber').progressbar('setValue', percentComplete);
}
else {
document.getElementById('progressNumber').innerHTML = '无法计算';
}
}

//上传成功响应
function uploadComplete(evt) {
var message = evt.target.responseText;
alert(message);
}

//上传失败
function uploadFailed(evt) {
alert("上传出错");
}

//取消上传
function uploadCanceled(evt) {
alert("上传已由用户或浏览器取消删除连接");
}
</script>

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div>
<div class="row" style="padding: 10px">
<div>
论文题目:
<input class="easyui-validatebox easyui-textbox" data-options="required:true" name="Re_Title"
id="Re_Title" style="width: 250px" />
</div>
<label for="file">
论文内容:
</label>
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();" />
<a id="uploadFile" style="display: none" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"
onclick="uploadFile()">上传</a>
</div>
<div id="fileName" style="padding: 10px">
</div>
<div id="fileSize" style="padding: 10px">
</div>
<div id="fileType" style="padding: 10px">
</div>
<div id="progressNumber" class="easyui-progressbar" style="width: 400px; float: left;
margin-left: 10px;">
</div>
<div style="padding: 95px">
<input id="submit" type="submit" value="保存" class="bottom" />
<input id="reset" type="reset" value="取消" class="bottom" />
</div>
</div>
}

控制器 Controller.cs

/// <summary>
/// 上传文件
/// </summary>
/// <param name="fileToUpload"></param>
/// <returns></returns>
[HttpPost]
[ValidateInput(false)]
public string Upload(HttpPostedFileBase[] fileToUpload)
{
try
{
string FileUrl = string.Empty;
foreach (HttpPostedFileBase file in fileToUpload)
{
string path = System.IO.Path.Combine(Server.MapPath("~/FileUpLoad/Reviews"), System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path);
FileUrl = path;
}
Session["URL"] = FileUrl;
return "上传成功";
}
catch
{
return "上传失败";
}

}

【下载】

view

<a href="/Manage/DownFile?filePath=@Model.Re_Content&fileName=@Model.Re_Title">@Model.Re_Title</a>

controller.cs

#region ReviewDownFile
//本地路径转换成URL相对路径
private string urlconvertor(string imagesurl1)
{
string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());//获取程序根目录
string imagesurl2 = imagesurl1.Replace(tmpRootDir, ""); //转换成相对路径
imagesurl2 = imagesurl2.Replace(@"\", @"/");
return imagesurl2;
}

//下载方法
[HttpGet]
public FileStreamResult DownFile(string filePath, string fileName)
{
var url = filePath;
var newurl = urlconvertor(url);
string absoluFilePath = Server.MapPath(System.Configuration.ConfigurationManager.AppSettings["AttachmentPath"] + newurl);
absoluFilePath = absoluFilePath.Replace("\\Manage", "");
return File(new FileStream(absoluFilePath, FileMode.Open), "application/octet-stream", Server.UrlEncode(fileName));
}
#endregion

MVC 上传 下载的更多相关文章

  1. Spring框架学习(8)spring mvc上传下载

    内容源自:spring mvc上传下载 如下示例: 页面: web.xml: <?xml version="1.0" encoding="UTF-8"?& ...

  2. MVC 上传下载

    在Asp.net的WEBform中,上传文件与下载文件处理是很简单的事情,如果转为ASP.NET MVC呢?那就没有那么容易了,难少少,也不是很难,一起来看下本文吧.本文主要讲如何在Asp.net M ...

  3. asp.net mvc 上传下载文件的几种方式

    view: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  4. spring mvc上传下载文件

    前端jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  5. 基于Spring Mvc实现的Excel文件上传下载

    最近工作遇到一个需求,需要下载excel模板,编辑后上传解析存储到数据库.因此为了更好的理解公司框架,我就自己先用spring mvc实现了一个样例. 基础框架 之前曾经介绍过一个最简单的spring ...

  6. Spring MVC 使用介绍(十四)文件上传下载

    一.概述 文件上传时,http请求头Content-Type须为multipart/form-data,有两种实现方式: 1.基于FormData对象,该方式简单灵活 2.基于<form> ...

  7. mvc中文件上传下载

    //控制器 public ActionResult FileUpLoad(HttpPostedFileBase f1) { string path = Server.MapPath("~/P ...

  8. C# --MVC实现简单上传下载

    首先创建一个默认的控制器Defaultcontroller 然后生成视图View 在视图里面 创建文件选择器 创建上传.下载按钮 代码如下 <body> <div> <f ...

  9. springmvc 上传下载

    springmvc文件上传下载在网上搜索的代码 参考整理了一份需要使用的jar.commons-fileupload.jar与commons-io-1.4.jar 二个文件 1.表单属性为: enct ...

随机推荐

  1. 读取properties文件方式

    //src目录下 static Properties pro = new Properties(); //jar包时用(ide也可以) // pro.load(Tool.class.getClassL ...

  2. hive数据操作

    mdl是数据操作类的语言,包括向数据表加载文件,写查询结果等操作 hive有四种导入数据的方式 >从本地加载数据 LOAD DATA LOCAL INPATH './examples/files ...

  3. 【转载】 删除Win10“这台电脑”中的6个文件夹

    转载地址:http://www.myxzy.com/post-431.html Windows 8.1/windows 10对比windows 7都有一个变化,打开“这台电脑”(或“我的电脑”)后,“ ...

  4. SQL Server Database 维护计划创建完整的备份策略

    SQL Server的维护计划Maintenance Plan是一个非常实用的维护工具,可以完成大多数的数据库维护任务,通过对这些功能的封装,可以省去很多的代码编写时间.网络上完整介绍的不是很多,特此 ...

  5. DNS域名解析过程

    图1-10是DNS域名解析的主要请求过程实例图. 如图1-10所示,当一个用户在浏览器中输入www.abc.com时,DNS解析将会有将近10个步骤,这个过程大体描述如下.当用户在浏览器中输入域名并按 ...

  6. Java日期处理

    日常工作中经常遇到关于日期的处理,下面把自个写好的Java代码段分享一下,也当做自个的一个备份,同时也欢迎交流,如若分享请注明出处,谢谢. 1.返回两个时间段之间的月份: /** * 返回任意两个月份 ...

  7. python netwokx环境搭建

    用的python2.7 myeclipse离线安装pydev http://my.oschina.net/iuranus/blog/281978 安装pip networkx http://www.t ...

  8. 2016-2017 ACM-ICPC, NEERC, Northern Subregional Contest

    A. Anniversary Cake 随便挑两个点切掉就好了. #include<bits/stdc++.h> using namespace std; const int Maxn=2 ...

  9. [转] 前端中的MVC

    MVC是一种设计模式,它将应用划分为3个部分:数据(模型).展现层(视图)和用户交互(控制器).其中: M - MODEL(模型) V - VIEW(视图) C - CONTROLLER(控制器) 一 ...

  10. web Worker使js实现‘多线程’?

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...