MVC的cshtml部分:
@{
ViewBag.Title = "djk8888";
}
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.min.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/vendor/jquery.ui.widget.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.iframe-transport.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.fileupload.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.fileupload-process.js"></script>
<script src="~/jQuery-File-Upload-8.8.5/js/jquery.fileupload-validate.js"></script>
<link href="~/jQuery-File-Upload-8.8.5/css/jquery.fileupload-ui.css" rel="stylesheet" />
<style type="text/css">
.bar {
height: 18px;
background: green;
}
</style>
<script>
$(function () {
$('#fileupload').fileupload({
url: "/Home/UploadFiles",
dataType: 'json',
replaceFileInput: false,//显示已选择文件文件名(必须)
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
},
add: function (e, data) {
//判断文件类型,此例限制为:Excel文件
var fileType = data.files[0].name.split('.').pop();
var acceptFileTypes = /xls|xlsx$/i;
if (!acceptFileTypes.test(fileType)) {
$("#startBtn").hide();//隐藏上传按钮
alert("不支持的文件类型,仅支持EXCEL文件");
return;
}
//判断文件大小,此例限制为:1mb:
var size = data.files[0].size;
size = (size / 1024).toFixed(2);//文件大小单位kb
var maxFileSize = 1024;//1mb=1024kb
if (size > maxFileSize) {
$("#startBtn").hide();//隐藏上传按钮
alert("文件大小:" + size + "KB,超过最大限制:" + maxFileSize + "KB");
return;
}
$("#startBtn").show();//显示上传按钮
//点击上传按钮开始上传
data.context = $('#startBtn').click(function () {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
},
done: function (e, data) {
data.context = $('<p/>').text("文件上传成功!").replaceAll($(this));
},
change: function (e, data) {
if (data.files.length > 1) {
$("#startBtn").hide();//隐藏上传按钮
alert("只能选择1个文件");
return false;
}
},
drop: function (e, data) {
if (data.files.length > 1) {
$("#startBtn").hide();//隐藏上传按钮
alert("只能选择1个文件");
return false;
}
},
});
});
</script>
<h2>用jQuery-File-Upload上传Excel文件(ASP.NET MVC)</h2>
<input id="fileupload" type="file" name="multiFiles" multiple />
<button id="startBtn" style="display:none;">上传</button>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
ASP.NET MVC的Controller部分
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace jqueryfileupload.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult UploadFiles()
{
try
{
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
var fullPath = Path.Combine(StorageRoot, Path.GetFileName(file.FileName));
file.SaveAs(fullPath);
}
return Content("上传成功!");
}
catch (Exception ex)
{
return Content(ex.ToString() + "\r\n" + ex.Message + "\r\n" + ex.Source + "\r\n" + ex.StackTrace);
}
}
private string StorageRoot
{
get { return Path.Combine(Server.MapPath("~/Files")); }
}
}
}
配套源代码下载地址:
http://download.csdn.net/download/djk8888/10163404
http://download.csdn.net/download/djk8888/10167119 [推荐]
吐槽一下:我就是想让大家0分下载,但是现在CSDN的下载积分规则变了,我也只好呵呵了
用easyui-filebox上传Excel文件(ASP.NET MVC) 传送门:http://blog.csdn.net/djk8888/article/details/78859688