Heim  >  Artikel  >  Backend-Entwicklung  >  Beispielcode-Freigabe, wie Asp.net MVC swupload zum Hochladen mehrerer Bilder verwendet

Beispielcode-Freigabe, wie Asp.net MVC swupload zum Hochladen mehrerer Bilder verwendet

黄舟
黄舟Original
2017-07-17 11:24:051535Durchsuche

Dieser Artikel stellt hauptsächlich Asp.net MVC vor, um swupload zum Implementieren der Multi-Image-Upload-Funktion zu verwenden, die einen bestimmten Referenzwert hat

Das Beispiel in Dieser Artikel teilt den spezifischen Code für swupload, um mehrere Bild-Uploads als Referenz zu implementieren. Der spezifische Inhalt lautet wie folgt: 1. Laden Sie den WebUploader herunter. Kopieren Sie ihn zu Ihrem eigenen Projekt

3. Fügen Sie eine Referenz hinzu

4. Bereiten Sie einen Container für Bilder und einen Upload-Button vor

<!--引入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>
5 Instanz und warten Sie auf Ereignisse

<p id="fileList"></p> <!--这是存放图片的容器-->
<p class="cp_img_jia" id="filePicker"></p> <!--这是上传按钮-->
6 Erstellen Sie eine neue Aktion im Controller, um das Bild zu speichern und den Bildpfad zurückzugeben (diese Methode wird im Blog von eflay senior erwähnt)

<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>
Hier entlang Und du bist fertig.

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe, wie Asp.net MVC swupload zum Hochladen mehrerer Bilder verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn