https://blueimp.github.io/jQuery-File-Upload/进度条虽帅,我只取一瓢饮
道理相通,我简单分享下在.net MVC下的实装
1.制作Model类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace RCRS.WebApp.LG.EM.Models
{
//----------------------------------------------------------------
/// <summary>
/// Import画面用
/// </summary>
//----------------------------------------------------------------
public class tmp_UploadFile
{
/// <summary></summary>
public HttpPostedFileBase FileName { get; set; }
}
}
2.实装controller里的对应方法,我这个处理逻辑比较复杂,懒得修改了,反正就这个意思
//----------------------------------------------------------------
/// <summary>
/// アップロード
/// </summary>
/// <returns></returns>
//----------------------------------------------------------------
[HttpPost]
public virtual ActionResult UploadFile()
{
HttpPostedFileBase uploadedFile = Request.Files["FileName"];
string message = "アップロード失敗しました。";
bool isUploaded = false;
string path = "";
string dateTimeNow = DateTime.Now.ToString("yyMMdd-hhmmss");
string userName = User.Identity.GetUserName();
string uploadMsg = string.Empty;
if (uploadedFile != null && uploadedFile.ContentLength != 0)
{
string pathForSaving = Server.MapPath("~/App_Data/Uploaded/");
try
{
if (BsnssBihin.IsExcel(uploadedFile.FileName))
{
path = System.IO.Path.Combine(pathForSaving, dateTimeNow + "_" + uploadedFile.FileName);
uploadedFile.SaveAs(path);
isUploaded = BsnssBihin.UploadBihinChange(path, userName, ref uploadMsg);
if (isUploaded)
{
message = "アップロード成功しました!" + "\n" + uploadMsg;
Logger.Info("[成功]備品アップロード, " + dateTimeNow + ", " + "[" + userName + "]" + "[" + path + "]" + uploadMsg);
}
else
{
message = "アップロード失敗しました。" + "\n" + uploadMsg;
Logger.Info("[失敗]備品アップロード, " + dateTimeNow + ", " + "[" + userName + "]" + "["+path + "]" + uploadMsg);
}
}
else
{
message = "ファイルの形式は不正です。";
}
}
catch (Exception ex)
{
message = string.Format("失敗しました: {0}", ex.Message);
Logger.Info("[失敗]備品アップロード: " + ex.Message + dateTimeNow + ", " + "[" + userName + "]" + "[" + path + "]");
}
}
return Json(new { isUploaded = isUploaded, message = message }, "text/html");
}
3.页面的实装
@model RCRS.WebApp.LG.EM.Models.tmp_UploadFile
<table align="center" style="margin-bottom:200px"> <tr> <td> <div style="width:470px"> <input type="text" id="tbx-file-path" value="ファイルを選択してください" readonly="readonly" /> </div> </td> <td> <div style="width: 60px"> <span class="btn btn-primary fileinput-button"> <span>選 択
</span> @Html.TextBoxFor(m => m.FileName, new { id = "file-upload", type = "file", accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })
</span> </div> </td> <td> <div style="width:60px"> <a class="btn btn-primary" href="#" id="hl-start-upload">アップロード
</a> </div> </td> </tr></table><div id="loadingOver" class="loadingOver"></div><div id="dvloader" class="dvloader"> <span class="label label-info" style="align-content:center"> 処理中、少々お待ちください
</span><br /> <br /> <img id="loadingGif" src="../Content/img/loader.gif" alt="" /></div>@section scripts{
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/common")
@Scripts.Render("~/bundles/fileupload")
<script type="text/javascript">
var data_upload;
$(document).ready(function () {
'use strict';
$('#file-upload').fileupload({
url: '../Bihin/UploadFile',
dataType: 'json',
add: function (e, data) {
data_upload = data;
},
done: function (event, data) {
if (data.result.isUploaded) {
$("#tbx-file-path").val("ファイルを選択してください");
data_upload = "";
}
$("#dvloader").css("display", "none");
$("#loadingOver").css("display", "none");
alert(data.result.message);
},
fail: function (event, data) {
data_upload = "";
if (data.files[0].error) {
$("#dvloader").css("display", "none");
$("#loadingOver").css("display", "none");
alert(data.files[0].error);
}
}
});
});
$("#hl-start-upload").on('click', function () {
if (data_upload) {
$("#dvloader").css("display", "block");
$("#loadingOver").css("display", "block");
data_upload.submit();
}
return false;
});
$("#file-upload").on('change', function () {
$("#tbx-file-path").val(this.files[0].name);
});
</script>}
√,就是这个样子
还附赠了一个简易loding的实现
贴出CSS代码:
.dvloader {
display:none;
position:absolute;
top:40%;
left:40%;
width:20%;
height:20%;
z-index:1001;
text-align:center;
font-size:1.5em;
}
.loadingOver {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#f5f5f5;
opacity:0.5;
z-index:1000;
}
这里,多说一嘴:
关于input 的accept属性,这里只想读入Excel,所以
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel有点长啊,还好,并不忧伤
就酱。
posted on 2016-03-14 15:47
Ying-er 阅读(3526)
评论(0) 编辑 收藏 所属分类:
JQuery 、
.Net