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


Posted in Javascript onMarch 18, 2016

道理相通,我简单分享下在.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="ファイルを??kしてください" readonly="readonly" />
   </div>
  </td>
  <td>
   <div style="width: 60px">
    <span class="btn btn-primary fileinput-button">
     <span>? ?k</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"> ?I理中、少々お待ちください</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("ファイルを??kしてください");
      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

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

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

Javascript 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 #Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 #Javascript
基于jQuery实现收缩展开功能
Mar 18 #Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 #Javascript
jQuery.deferred对象使用详解
Mar 18 #Javascript
JS中的二叉树遍历详解
Mar 18 #Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 #Javascript
You might like
php SQL防注入代码集合
2008/04/25 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
javascript的事件描述
2006/09/08 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vuex 的简单使用
2018/03/22 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python 拼接文件路径的方法
2018/10/23 Python
python调用自定义函数的实例操作
2019/06/26 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
土建施工员岗位职责
2014/07/16 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
师德师风整改措施
2014/10/24 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
人生遥控器观后感
2015/06/11 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL