Sample code sharing on how Asp.net MVC uses swupload to upload multiple images

This article mainly introduces you to Asp.net MVC uses swupload to implement the multi-image upload function, which has certain reference value. Interested friends can refer to it

The example in this article shares the specific code for swupload to implement multiple image uploads for your reference. The specific content is as follows

1. Download WebUploader

2. Download the files in the compressed package Copy it 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 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 mentioned on the blog of senior 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
      });
    
    }

This is done.

The above is the detailed content of Sample code sharing on how Asp.net MVC uses swupload to upload multiple images. For more information, please follow other related articles on the PHP Chinese website!