Exemple détaillé d'utilisation de swupload pour implémenter plusieurs fonctions de téléchargement d'images dans le MVC d'Asp.net

Cet article présente principalement Asp.net MVC pour utiliser swupload pour implémenter en détail la fonction de téléchargement multi-images. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés. avec tout le monde. Le code spécifique de swupload pour implémenter plusieurs téléchargements d'images est pour votre référence. Le contenu spécifique est le suivant

1 Téléchargez WebUploader

2. à votre propre projet

3. Ajoutez une référence

<!--引入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. Préparez un conteneur pour les images et un bouton de téléchargement

.

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

5. Créez une instance Web Uploader et écoutez les événements

<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 Créez une nouvelle action dans le contrôleur pour enregistrez l'image et renvoyez le chemin de l'image (Cette méthode est mentionnée sur le blog d'eflay senior)

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

C'est tout.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!