Asp.net MVC使用swupload实现多图片上传功能

本文实例为大家分享了swupload实现多图片上传的具体代码，供大家参考，具体内容如下

1. 下载webuploader

2. 将下载到的压缩包里面的文件复制到自己的项目中  

3. 添加引用

<!--引入jquery-->
<script src="~/script/jquery-1.8.2.min.js"></script>
<!--引入css-->
<link href="~/css/webuploader.css" rel="stylesheet" />
<!--引入js-->
<script src="~/script/webuploader.js"></script>

4.准备一个放图片的容器和一个上传按钮

<div id="filelist"></div> <!--这是存放图片的容器-->
<div class="cp_img_jia" id="filepicker"></div> <!--这是上传按钮-->

5.创建web uploader实例并监听事件

<script type="text/javascript">

 var applicationpath = window.applicationpath === "" ? "" : window.applicationpath || "../../";
 $(function () {
  var $ = jquery,
  $list = $('#filelist'),
  // 优化retina, 在retina下这个值是2
  ratio = window.devicepixelratio || 1,
  // 缩略图大小
  thumbnailwidth = 90 * ratio,
  thumbnailheight = 90 * ratio,
  // web uploader实例
  uploader;
  uploader = webuploader.create({
   // 选完文件后，是否自动上传。
   auto: false,

   // swf文件路径
   swf: applicationpath + '/script/uploader.swf',

   // 文件接收服务端。
   server: applicationpath + '/home/uploadprocess',

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

   //只允许选择图片
   accept: {
    title: 'images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimetypes: 'image/*'
   }
  });
  
  // 当有文件添加进来的时候
  uploader.on('filequeued', function (file) {
   var $li = $(
     '<div id="' + file.id + '" class="cp_img">' +
      '<img>' +
     '<div class="cp_img_jian"></div></div>'
     ),
    $img = $li.find('img');


   // $list为容器jquery实例
   $list.append($li);

   // 创建缩略图
   // 如果为非图片文件，可以不用调用此方法。
   // thumbnailwidth x thumbnailheight 为 100 x 100
   uploader.makethumb(file, function (error, src) {
    if (error) {
     $img.replacewith('<span>不能预览</span>');
     return;
    }

    $img.attr('src', src);
   }, thumbnailwidth, thumbnailheight);
  });

  // 文件上传过程中创建进度条实时显示。
  uploader.on('uploadprogress', function (file, percentage) {
   var $li = $('#' + file.id),
    $percent = $li.find('.progress span');

   // 避免重复创建
   if (!$percent.length) {
    $percent = $('<p class="progress"><span></span></p>')
      .appendto($li)
      .find('span');
   }

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

  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  uploader.on('uploadsuccess', function (file, response) {
   
   $('#' + file.id).addclass('upload-state-done');
  });

  // 文件上传失败，显示上传出错。
  uploader.on('uploaderror', function (file) {
   var $li = $('#' + file.id),
    $error = $li.find('div.error');

   // 避免重复创建
   if (!$error.length) {
    $error = $('<div class="error"></div>').appendto($li);
   }

   $error.text('上传失败');
  });

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

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

  });

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

  });

  //显示删除按钮
  $(".cp_img").live("mouseover", function ()
  {
   $(this).children(".cp_img_jian").css('display', 'block');

  });
  //隐藏删除按钮
  $(".cp_img").live("mouseout", function () {
   $(this).children(".cp_img_jian").css('display', 'none');

  });
  //执行删除方法
  $list.on("click", ".cp_img_jian", function ()
  {
   var id = $(this).parent().attr("id");
   uploader.removefile(uploader.getfile(id,true));
   $(this).parent().remove();
  });
  
 });


</script>

6 在controller里新建一个action用于保存图片并返回图片路径（这方法是 eflay 前辈博客上说的）

public actionresult uploadprocess(string id, string name, string type, string lastmodifieddate, int size, httppostedfilebase file)
  {
   string filepathname = string.empty;

   string localpath = path.combine(httpruntime.appdomainapppath, "upload");
   if (request.files.count == 0)
   {
    return json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
   }

   string ex = path.getextension(file.filename);
   filepathname = guid.newguid().tostring("n") + ex;
   if (!system.io.directory.exists(localpath))
   {
    system.io.directory.createdirectory(localpath);
   }
   file.saveas(path.combine(localpath, filepathname));

   return json(new
   {
    jsonrpc = "2.0",
    id = id,
    filepath = "/upload/" + filepathname
   });
  
  }

这样就大功告成了。

由于是第一次写博客，里面如果有写的不详细或不对的地方，欢迎大家指点。希望能和大家一起进步。

源码下载：swupload实现多图片上传

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