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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
ajax与302响应代码测试
Oct 23 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 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程序
2012/02/04 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php文件包含的几种方式总结
2019/09/19 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
5个javascript的数字格式化函数分享
2011/12/07 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python中的decorator的作用详解
2018/07/26 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
公积金转移接收函
2014/01/11 职场文书
给校长的建议书范文
2015/09/14 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL