数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

ASP.NET MVC Webuploader实现上传功能

来源:脚本之家  责任编辑:小易  

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

1.简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。

2.引入资源:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定,在后面将展示-->

3.HTML部分

<div id="uploader" class="wu-example">
 <!--用来存放文件信息-->
  <ul id="thelist" class="list-group"></ul>
  <div class="uploader-list"></div>
  <div class="btns">
  <div id="picker" style="float:left;">选择文件</div>
  <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" style="width:78px;height:37px;margin-left:10px;" />
 </div>
</div>

4.JS部分

//初始化上传控件
 function initUpload() {
  var $ = jQuery;
  var $list = $('#thelist');
  var uploader = WebUploader.create({

   // 选完文件后,是否自动上传。
   auto: false,
   // swf文件路径
   swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf',

   // 文件接收服务端。
   server: applicationPath + 'PublicInfoManage/Upload/Upload',

   // 选择文件的按钮。可选。
   // 内部根据当前运行是创建,可能是input元素,也可能是flash.
   pick: '#picker',

   chunked: true,//开始分片上传
   chunkSize: 2048000,//每一片的大小
   formData: {
    guid: GUID //自定义参数,待会儿解释
   },

   // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
   resize: false
  });
  // 当有文件被添加进队列的时候
  uploader.on('fileQueued', function (file) {
   $list.append('<li id="' + file.id + '" class="list-group-item">' +
    '<span class="fileName" dataValue="">' + file.name + '</span>' +
    '<span class="state" style=\" margin-left: 10px;\">等待上传</span>' +
    '<span class="filepath" dataValue="0" style=\" margin-left: 10px;display: none;\"></span>' +
    '<span class="download" style="margin-left:20px;"></span>' +
    '<span class="webuploadDelbtn"style=\"float: right;display: none; \">删除<span>' +
   '</li>');
  });
  // 文件上传过程中创建进度条实时显示。
  uploader.on('uploadProgress', function (file, percentage) {
   var $li = $('#' + file.id),
  $percent = $li.find('.progress .progress-bar');

   // 避免重复创建
   if (!$percent.length) {
    $percent = $('<div class="progress progress-striped active">' +
     '<div class="progress-bar" role="progressbar" style="width: 0%">' +
     '</div>' +
    '</div>').appendTo($li).find('.progress-bar');
   }

   $li.find('span.state').text('上传中');

   $percent.css('width', percentage * 100 + '%');

  });

  // 文件上传成功,给item添加成功class, 用样式标记上传成功。
  uploader.on('uploadSuccess', function (file, response) {
   var $li = $('#' + file.id);
   //$('#' + file.id).find('p.state').text('已上传');
   $.post('../../PublicInfoManage/Upload/Merge', { guid: GUID, fileName: file.name }, function (data) {
    $li.find('span.state').html("上传成功");
    $li.find('span.filepath').attr("dataValue", 1);
    $li.find('span.fileName').attr("dataValue", data.filename);
    $li.find('span.fileName').html(data.filename);
    $li.find('span.download').html("<a href=\"../../PublicInfoManage/Upload/DownFile?filePath=" + data.filepath + "&fileName=" + data.filename + "\">下载</a>")
    $li.find('span.webuploadDelbtn').show();
    $li.find('span.filepath').html(data.filepath);
    //增加列表存储
    files.push(data);
   });
  });

  // 文件上传失败,显示上传出错。
  uploader.on('uploadError', function (file, reason) {
   $('#' + file.id).find('p.state').text(reason);
  });

  // 完成上传完了,成功或者失败,先删除进度条。
  uploader.on('uploadComplete', function (file) {
   $('#' + file.id).find('.progress').fadeOut();
  });

  //所有文件上传完毕
  uploader.on("uploadFinished", function () {
   //提交表单

  });
  //开始上传
  $("#ctlBtn").click(function () {
   uploader.upload();

  });
  //删除
  $list.on("click", ".webuploadDelbtn", function () {
   debugger
   var $ele = $(this);
   var id = $ele.parent().attr("id");
   var file = uploader.getFile(id);
   uploader.removeFile(file);
   $ele.parent().remove();
   //移除数组
   var destFile = findFile(file.name)
   var index = files.indexOf(destFile);
   if (index > -1) {
    files.splice(index, 1);
   }
  });
 }

5.C# Controller后台处理

/// <summary>
  /// 上传文件
  /// </summary>
  /// <returns></returns>
  [HttpPost]
  public ActionResult Upload()
  {
   string fileName = Request["name"];
   int lastIndex = fileName.LastIndexOf('.');
   string fileRelName = lastIndex == -1? fileName: fileName.Substring(0, fileName.LastIndexOf('.'));
   fileRelName = fileRelName.Replace("[", "").Replace("]", "").Replace("{", "").Replace("}", "").Replace(",", "");
   int index = Convert.ToInt32(Request["chunk"]);//当前分块序号
   var guid = Request["guid"];//前端传来的GUID号
   var dir = Server.MapPath("~/Upload/file");//文件上传目录
   string currentTime = DateTime.Now.ToString("yyyy-MM-dd");
   dir += "\\" + currentTime;
   dir = Path.Combine(dir, fileRelName);//临时保存分块的目录
   if (!System.IO.Directory.Exists(dir))
    System.IO.Directory.CreateDirectory(dir);
   string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突
   var data = Request.Files["file"];//表单中取得分块文件
   //if (data != null)//为null可能是暂停的那一瞬间
   //{
   data.SaveAs(filePath);//报错
   //}
   return Json(new { erron = 0 });//Demo,随便返回了个值,请勿参考
  }

6.实现效果

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

您可能感兴趣的文章:


  • 本文相关:
  • jquery.uploadify 上传文件插件的使用详解 for asp.net
  • asp.net+fckeditor上传图片显示叉叉图片无法显示的问题的解决方法
  • asp.net fileupload控件上传文件与多文件上传
  • asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)
  • asp.net mvc实现无组件上传图片实例介绍
  • asp.net 多文件上传,兼容ie6/7/8,提供完整代码下载
  • asp.net实现mvc处理文件的上传下载功能实例教程
  • asp.net图片上传实例
  • asp.net 无刷新文件上传并显示进度条的实现方法及思路
  • asp.net下文件上传和文件删除的代码
  • gridview使用checkbox全选与单选采用js实现同时高亮显示选择行
  • .net输出重写压缩页面文件的小例子
  • asp.net搭配ajax实现搜索提示功能
  • asp.net中word转html的办法(不需要word组件)
  • asp.net中使用ajax的方法
  • 状态保存机制之viewstate概述及应用
  • 深入本机影像生成器(ngen.exe)工具使用方法详解
  • asp.net下gdi+的一些常用应用(水印,文字,圆角处理)技巧
  • .net非托管资源的回收方法
  • 详解.net core中的日志组件(logging)
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved