这篇文章主要介绍了JQuery fileupload插件实现文件上传功能的相关资料,需要的朋友可以参考下

道理相通，我简单分享下在.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

以上就是本文的全部内容，希望对大家的学习有所帮助。