• 前端之家
• jQuery
• JQuery fileupload插件实现文件上传功能

JQuery fileupload插件实现文件上传功能

2019-01-04 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了JQuery fileupload插件实现文件上传功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

道理相通，我简单分享下在.net MVC下的实装。

1.制作Model类

namespace RCRS.WebApp.LG.EM.Models
{
//----------------------------------------------------------------
///

/// Import画面用
///

//----------------------------------------------------------------
public class tmp_UploadFile
{
///

public HttpPostedFileBase FileName { get; set; }
}
}

2.实装controller里的对应方法，我这个处理逻辑比较复杂，懒得修改了，反正就这个意思

/// アップロード /// /// //---------------------------------------------------------------- [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("~/AppData/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("[失敗]備品アップロード," + "[" + 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.页面的实装

選 択 @Html.TextBoxFor(m => m.FileName,new { id = "file-upload",type = "file",accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" })

<div id="loadingOver" class="loadingOver">

<div id="dvloader" class="dvloader">
<span class="label label-info" style="align-content:center"> 処理中、少々お待ちください

@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);
});