Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Eingabetyps = Datei zur Auswahl von Bildern und zur Erzielung von Vorschaueffekten

Detaillierte Erläuterung des Eingabetyps = Datei zur Auswahl von Bildern und zur Erzielung von Vorschaueffekten

小云云Original: 2018-01-02 16:00:294124Durchsuche

Dieser Artikel enthält hauptsächlich ein Beispiel für die Auswahl von Bildern mit Eingabetyp=Datei und das Erzielen von Vorschaueffekten. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Geben Sie über das Tag den Dateityp an, der das Hochladen von Dateien ermöglichen kann.

Akzeptieren: Sie können den Upload-Typ auswählen, z. B.: nur Bilder hochladen, und es gibt keine Einschränkungen. Das Bildformat ist image/*;

multiple: gibt an, ob mehrere Dateien ausgewählt werden können;

gibt an, dass nur Bilder hochgeladen werden können und mehrere Dateien ausgewählt werden können

<input type="file" accept="image/*" multiple="multiple"/>

Natürlich kann ein direkter Eingabetyp=Datei nur hochgeladene Dateien/Ressourcen auswählen. Wenn wir nach der Auswahl des Bildes den Vorschaueffekt auf der aktuellen Seite erzielen müssen, können wir dies wie folgt erreichen

HTML-Code

<body>
  <p id="box">
    <img id="imgshow" src="" alt=""/>
  </p>
  <p id="pox">
    <input id="filed" type="file" accept="image/*"/>
  </p>
</body>

CSS-Stildatei

<style>
    #box{
      width: 300px;
      height: 300px;
      border: 2px solid #858585;
    }
    #imgshow{
      width: 100%;
      height: 100%;
    }
    #pox{
      width: 70px;
      height: 24px;
      overflow: hidden;
    }
  </style>

JS-Code

<script>
    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
    //获取input file的files文件数组;
    //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
    //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
      var file = $('#filed').get(0).files[0];
    //创建用来读取此文件的对象
      var reader = new FileReader();
    //使用该对象读取file文件
      reader.readAsDataURL(file);
    //读取文件成功后执行的方法函数
      reader.onload=function(e){
    //读取成功后返回的一个参数e，整个的一个进度事件
        console.log(e);
    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
    //的base64编码格式的地址
        $('#imgshow').get(0).src = e.target.result;
      }
    })
</script>

* jQuery wird im obigen JS-Code verwendet, also jQuery-Datei

Verwandte Empfehlungen:

Beispiel-Tutorial zur Dateisteuerung zum Auswählen von Bildern

HTML5 Plus-Beispielcode für Implementieren Sie die Funktion zum Aufnehmen von Bildern oder Auswählen von Bildern im Album zum Hochladen auf die mobile APP

Nach der Eingabe des ausgewählten Bildes wird es nicht rechtzeitig hochgeladen und angezeigt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Eingabetyps = Datei zur Auswahl von Bildern und zur Erzielung von Vorschaueffekten. 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

Vorheriger Artikel：Beispiel für von AngularJS implementierte sekundäre Verknüpfungsfunktionen auf Provinz- und GemeindeebeneNächster Artikel：Beispiel für von AngularJS implementierte sekundäre Verknüpfungsfunktionen auf Provinz- und Gemeindeebene

In Verbindung stehende Artikel

Mehr sehen