Detailed example of using swupload to implement multiple image upload functions in Asp.net's MVC

This article mainly introduces Asp.net MVC to use swupload to implement the multi-image upload function in detail. It has certain reference value. Interested friends can refer to it.

The examples in this article are shared with everyone. The specific code for swupload to implement multiple image uploads is provided for your reference. The specific content is as follows

1. Download WebUploader

2. Copy the files in the downloaded compressed package to your own project

3. Add a reference

<!--引入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. Prepare a container for images and an upload button

<p id="fileList"></p> <!--这是存放图片的容器-->
<p class="cp_img_jia" id="filePicker"></p> <!--这是上传按钮-->

5. Create a Web Uploader instance and listen to the event

<script type="text/javascript">

 var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
 $(function () {
  var $ = jQuery,
  $list = $(&#39;#fileList&#39;),
  // 优化retina, 在retina下这个值是2
  ratio = window.devicePixelRatio || 1,
  // 缩略图大小
  thumbnailWidth = 90 * ratio,
  thumbnailHeight = 90 * ratio,
  // Web Uploader实例
  uploader;
  uploader = WebUploader.create({
   // 选完文件后，是否自动上传。
   auto: false,

   // swf文件路径
   swf: applicationPath + &#39;/Script/Uploader.swf&#39;,

   // 文件接收服务端。
   server: applicationPath + &#39;/Home/UpLoadProcess&#39;,

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

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


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

   // 创建缩略图
   // 如果为非图片文件，可以不用调用此方法。
   // thumbnailWidth x thumbnailHeight 为 100 x 100
   uploader.makeThumb(file, function (error, src) {
    if (error) {
     $img.replaceWith(&#39;<span>不能预览</span>&#39;);
     return;
    }

    $img.attr(&#39;src&#39;, src);
   }, thumbnailWidth, thumbnailHeight);
  });

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

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

   $percent.css(&#39;width&#39;, percentage * 100 + &#39;%&#39;);
  });

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

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

   // 避免重复创建
   if (!$error.length) {
    $error = $(&#39;<p class="error"></p>&#39;).appendTo($li);
   }

   $error.text(&#39;上传失败&#39;);
  });

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

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

  });

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

  });

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

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

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


</script>

6 Create a new Action in the Controller to save the image and return the image path (this method is eflay senior (Said on the blog)

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
   });
  
  }

This way you’re done.

The above is the detailed content of Detailed example of using swupload to implement multiple image upload functions in Asp.net's MVC. For more information, please follow other related articles on the PHP Chinese website!