Heim

JS-Spezialeffekte

Andere Spezialeffekte

vue.js图片批量上传插件

vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件，适用于手机端的图片上传代码，支持批量上传，拖到图片上传，显示文件数量和大小等功能

Jetzt downloaden Vorschau

js代码

<script src="js/vue2.2.2.js"></script>
<script>
  //  import up from  './src/components/Hello'
  var app = new Vue({
    el: '#app',
    data () {
      return {
        imgList: [],
        size: 0
      }
    },
    methods: {
      fileClick(){
        document.getElementById('upload_file').click()
      },
      fileChange(el){
        if (!el.target.files[0].size) return;
        this.fileList(el.target.files);
        el.target.value = ''
      },
      fileList(files){
        for (let i = 0; i < files.length; i++) {
          this.fileAdd(files[i]);
        }
      },
      fileAdd(file){
        this.size = this.size + file.size;//总大小
        let reader = new FileReader();
        reader.vue = this;
        reader.readAsDataURL(file);
        reader.onload = function () {
          file.src = this.result;
          this.vue.imgList.push({
            file
          });
        }
      },
      fileDel(index){
        this.size = this.size - this.imgList[index].file.size;//总大小
        this.imgList.splice(index, 1);
      },
      bytesToSize(bytes){
        if (bytes === 0) return '0 B';
        let k = 1000, // or 1024
          sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
          i = Math.floor(Math.log(bytes) / Math.log(k));
        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
      },
      dragenter(el){
        el.stopPropagation();
        el.preventDefault();
      },
      dragover(el){
        el.stopPropagation();
        el.preventDefault();
      },
      drop(el){
        el.stopPropagation();
        el.preventDefault();
        this.fileList(el.dataTransfer.files);
      }
    }
  })
</script>

Haftungsausschluss

Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn

Verwandter Artikel

So laden Sie Bilder stapelweise in Empire CMS hoch

17 Apr 2024

Imperial CMS bietet die Funktion zum Stapel-Upload von Bildern. Die spezifischen Schritte sind wie folgt: Melden Sie sich beim Imperial CMS-Backend an und rufen Sie das Modul „Anhangsverwaltung“ auf. Klicken Sie auf die Schaltfläche „Bilder stapelweise hochladen“, wählen Sie Dateien aus und legen Sie die Upload-Parameter fest. Klicken Sie auf die Schaltfläche „Upload starten“ und der Upload-Fortschritt wird im Fenster angezeigt. Nachdem der Upload abgeschlossen ist, wird das Bild im angegebenen Verzeichnis gespeichert.

PHP批量上传图片的具体实现方式

13 Jun 2016

PHP批量上传图片的具体实现方式。大家可以通过下面这一段代码，来具体了解PHP批量上传图片的具体方式。我们在学习 PHP批量上传图片的代码如下： html head title uploadpictur

PHP批量上传图片的具体实现方法介绍.

06 Jun 2016

这篇文章主要介绍了PHP批量上传图片的具体实现方法。需要的朋友可以过来参考下，希望对大家有所帮助

Echtzeitanzeige des Fortschrittsbalkens zum Hochladen von Bildern basierend auf dem Jquery-Plug-in Uploadify_jquery

16 May 2016

In diesem Artikel werden hauptsächlich relevante Informationen zur Echtzeitanzeige des Fortschrittsbalkens zum Hochladen von Bildern basierend auf dem JQuery-Plug-In Uploadify vorgestellt. Interessierte Freunde können darauf verweisen.

Das jQuery-Plug-in jcrop Fileapi ermöglicht das Hochladen, Zuschneiden und Vorschaucode-Sharing von Bildern perfekt._jquery

16 May 2016

In diesem Artikel wird hauptsächlich das jQuery-Plug-in jcrop Fileapi vorgestellt, mit dem der Code zum Hochladen, Zuschneiden und Vorsehen von Bildern perfekt implementiert werden kann. Es ist sehr einfach und praktisch und der Effekt ist großartig.

Organisieren von Spezialeffekten für Textschaltflächen basierend auf jQuery_jquery

16 May 2016

Hier haben wir 10 beliebte Codes für Text, Schaltflächen, Formulare und andere Spezialeffekte auf Basis von jQuery zusammengestellt. Sie sind zum einfachen Vergleich und zur Verwendung zusammengestellt.

Beschreiben Sie Canvas in Kombination mit JavaScript, um Bildspezialeffekte zu erzielen

07 Mar 2018

Wir alle wissen, dass Canvas viele Spezialeffekte und andere magische Dinge erzeugen kann. Aber haben Sie schon einmal mit Canvas und JavaScript gespielt, um Bildspezialeffekte zu erzielen? sehen!

Implementierung von Spezialeffekten wie Sonnenlicht und Regentropfen in Vue-Statistikdiagrammen

27 Aug 2023

Spezialeffekte wie Sonnenlicht und Regentropfen in Vue-Statistikdiagrammen werden in die Datenvisualisierung implementiert. Statistische Diagramme sind eine häufig verwendete Methode zur Darstellung von Daten. Um jedoch das visuelle Erlebnis des Benutzers zu verbessern, können wir den statistischen Diagrammen einige Spezialeffekte hinzufügen, z. B. Sonnenlicht, Regentropfen und andere Effekte. In diesem Artikel wird erläutert, wie Sie Vue zum Implementieren dieser Spezialeffekte verwenden, und es werden Codebeispiele bereitgestellt. Zuerst müssen wir Vue und Echarts installieren. Sie können den Befehl npm zur Installation verwenden: npminstallvueecharts--save

Welche Arten von CSS-Stilen gibt es?

25 Apr 2024

Zu den CSS-Stiltypen gehören: Grundstile (Schriftarten, Farben, Rahmen, Auffüllung/Ränder), Layoutstile (schwebend, Positionierung, Anzeige, Rasterlayout, elastisches Layout), Spezialeffekte (Übergang, Animation, Transformation, Filter), Mischmodi. , Tabellenstile (Tabellenanzeige, Tabellendaten) und andere Stile (Medienabfragen, benutzerdefinierte Eigenschaften, Animationszeitleisten).

See all articles