JQuery fileupload插件实现文件上传功能
道理相通，我简单分享下在.netMVC下的实装。
1.制作Model类
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
namespaceRCRS.WebApp.LG.EM.Models
{
//----------------------------------------------------------------
///<summary>
///Import画面用
///</summary>
//----------------------------------------------------------------
publicclasstmp_UploadFile
{
///<summary></summary>
publicHttpPostedFileBaseFileName{get;set;}
}
}
2.实装controller里的对应方法，我这个处理逻辑比较复杂，懒得修改了，反正就这个意思
//----------------------------------------------------------------
///<summary>
///アップロード
///</summary>
///<returns></returns>
//----------------------------------------------------------------
[HttpPost]
publicvirtualActionResultUploadFile()
{
HttpPostedFileBaseuploadedFile=Request.Files["FileName"];
stringmessage="アップロード失敗しました。";
boolisUploaded=false;
stringpath="";
stringdateTimeNow=DateTime.Now.ToString("yyMMdd-hhmmss");
stringuserName=User.Identity.GetUserName();
stringuploadMsg=string.Empty;
if(uploadedFile!=null&&uploadedFile.ContentLength!=0)
{
stringpathForSaving=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,refuploadMsg);
if(isUploaded)
{
message="アップロード成功しました！"+"\n"+uploadMsg;
Logger.Info("[成功]備品アップロード,"+dateTimeNow+","+"["+userName+"]"+"["+path+"]"+uploadMsg);
}
else
{
message="アップロード失敗しました。"+"\n"+uploadMsg;
Logger.Info("[失敗]備品アップロード,"+dateTimeNow+","+"["+userName+"]"+"["+path+"]"+uploadMsg);
}
}
else
{
message="ファイルの形式は不正です。";
}
}
catch(Exceptionex)
{
message=string.Format("失敗しました:{0}",ex.Message);
Logger.Info("[失敗]備品アップロード:"+ex.Message+dateTimeNow+","+"["+userName+"]"+"["+path+"]");
}
}
returnJson(new{isUploaded=isUploaded,message=message},"text/html");
}
3.页面的实装
@modelRCRS.WebApp.LG.EM.Models.tmp_UploadFile
<tablealign="center"style="margin-bottom:200px">
<tr>
<td>
<divstyle="width:470px">
<inputtype="text"id="tbx-file-path"value="ファイルを選択してください"readonly="readonly"/>
</div>
</td>
<td>
<divstyle="width:60px">
<spanclass="btnbtn-primaryfileinput-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>
<divstyle="width:60px">
<aclass="btnbtn-primary"href="#"id="hl-start-upload">アップロード</a>
</div>
</td>
</tr>
</table>
<divid="loadingOver"class="loadingOver"></div>
<divid="dvloader"class="dvloader">
<spanclass="labellabel-info"style="align-content:center">処理中、少々お待ちください</span><br/>
<br/>
<imgid="loadingGif"src="../Content/img/loader.gif"alt=""/>
</div>
@sectionscripts{
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/common")
@Scripts.Render("~/bundles/fileupload")
<scripttype="text/javascript">
vardata_upload;
$(document).ready(function(){
'usestrict';
$('#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();
}
returnfalse;
});
$("#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
更多精彩内容，请点击《jQuery上传操作汇总》，进行深入学习和研究。
以上就是本文的全部内容，希望对大家的学习有所帮助。