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.实现效果

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