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 { getset; }
              }
          }

          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">
                          <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的實現(xiàn)
          貼出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 閱讀(3535) 評論(0)  編輯  收藏 所屬分類: JQuery.Net
          主站蜘蛛池模板: 平定县| 永和县| 祁阳县| 鄂托克旗| 固阳县| 河津市| 忻州市| 安远县| 饶平县| 马边| 腾冲县| 昂仁县| 揭东县| 敖汉旗| 来宾市| 武宁县| 吴忠市| 绥棱县| 上林县| 邮箱| 来宾市| 新源县| 晋江市| 榕江县| 石阡县| 南投县| 乐平市| 通道| 新宾| 杭锦后旗| 昆山市| 上饶市| 乐平市| 钟祥市| 黄冈市| 南城县| 拜泉县| 大关县| 邹城市| 房山区| 比如县|