|
项目
|
个人理解
|
|
figure/figcaption
|
据说表示页面独立内容，移除后无影响，暂无发现用处..
|
|
details
|
该标签有点意思，用于替代js中，元素收起展开功能。
最新ff都不支持……个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；
|
|
mark
|
高亮显示，当真语义化
|
|
progress
|
屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！
|
|
改良ol
|
老夫就没有用过这个主。。。
|
|
……
|
Projekt
|
Persönliches Verständnis
|
Abbildung/Bildunterschrift
|
Es wird gesagt, dass es den unabhängigen Inhalt der Seite darstellt. Es wurde noch keine Verwendung gefunden.
|
Details
|
Dieses Tag ist etwas interessant. Es wird verwendet, um die Funktion zum Zusammenklappen und Erweitern von Elementen in js zu ersetzen.
Das neueste FF unterstützt es nicht ... Da dieses Tag bereitgestellt wird, sollten Attribute bereitgestellt werden, um die Erweiterung nach oben und unten oder nach links und rechts anzuzeigen
|
markieren
|
Hervorgehoben, wirklich semantisch
|
Fortschritt
|
Diamanten, Sie können sich von GIF-Bildern verabschieden und müssen keine Divs verwenden, um Prozentsätze zu simulieren. Es wird ein Fortschrittsbalken angezeigt, der mit dem Windows-Bereich übereinstimmt, und das Hochladen von asynchronen Dateien ist perfekter!
|
Verbesserte Ol
|
Ich habe diesen Master noch nie benutzt. . .
|
……
Die oben genannten Elemente sind entbehrliche Elemente und es besteht keine Notwendigkeit, auf Details einzugehen. Als nächstes erscheint der Star dieses Artikels:
Datei-API
FileList und Dateiobjekt:
In HTML4 können Sie mit dem Datei-Tag nur eine Datei auswählen, in HTML5 können Sie jedoch nach dem Festlegen des Mehrfachattributs für das Datei-Tag mehrere Dateien auswählen! ! !
Nach der Auswahl wird hier das Dateilistenobjekt erstellt, bei dem es sich um eine Liste von Objekten handelt, die aus Dateien bestehen. Einfach ausgedrückt handelt es sich um ein Dateiarray.
Das Dateiobjekt verfügt über zwei Attribute: Name stellt den Dateinamen dar (ohne Pfad) und lastModifiedDate stellt den Zeitpunkt der letzten Änderung dar
Tatsächlich können wir beim Bearbeiten von Dateien in HTML4 viele lokale Attribute wie die Dateigröße abrufen, aber der böse IE unterstützt dies nicht und hat sich nach IE9 verbessert.
Wenn Sie also vom Client aufgefordert werden, eine zu große Datei hochzuladen, geben Sie bitte auf. . .
Blob-Objekt
stellt binäre Rohdaten dar und bietet eine Slice-Methode für den Zugriff auf Byte-interne Rohdaten. Die Größe stellt die Bytelänge des Blob-Objekts dar, der Typ stellt seinen Mime-Typ dar und wenn der Typ unbekannt ist, wird eine leere Zeichenfolge zurückgegeben.
Komm schon, mach ein einfaches Experiment:
Über Datei </title> ;<br /> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript"> <br> $ (document).ready(function () {<br> $('#wl').click(function () {<br> var f = $('#file')[0];<br> <br> var s = '';<br> <br> });<br> });<br> </script><br> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><br> <body><br> <input type="file" id="file" multiple /><br> <button id="wl"><br> Datei hochladen</button><br> </body><br> < /html><br> </div>
<br>
<p>Nachdem wir das Bild in ff ausgewählt haben, senden Sie es ab, setzen Sie einen Haltepunkt und werfen Sie einen Blick darauf: </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535523.jpg"></p>
<p>Der Protagonist der Datei erscheint, er ist es. Lassen Sie uns seine Attribute ausgeben, um zu sehen: </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535524.jpg"></p>
<p>Es hat wirklich alles! Mit dieser Immobilie können Sie jedoch viel anfangen. . . Werfen wir einen Blick auf ie7 und 8: </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535525.jpg"></p>
<p>Liebe Zuschauer, ich habe dieses Attribut überhaupt nicht, daher ist alles vielseitig. . . </p>
<p><strong>Übrigens finde ich es sehr mühsam, den IE-Browser zu debuggen. Haben Sie gute IE-Entwicklungs-Plug-Ins, wie den Firebug von ff oder das Google-eigene Plug-In? ? </strong></p>
<p> </p>
<p><strong>FIleReader-Schnittstelle</strong> </p>
<p>Die Filereader-Schnittstelle kann Dateien in den Speicher einlesen. Damit können wir Bilder bequem in der Vorschau anzeigen, aber ihr Nutzen geht darüber hinaus. </p>
<p><strong>Vier Methoden des Dateilesens: </strong></p>
<p>readAsBinaryString liest die Datei als Binärcode – normalerweise übergeben wir die Daten an das Backend;
</p>readAsText liest die Datei als Text – liest den Textinhalt;
<p>readAsURL liest die Datei als DataURL – normalerweise eine kleine Datei, ein Bild oder eine HTML-Datei
</p>Abbruch unterbricht das Lesen, da die Datei zu groß ist und die Wartezeit sehr lang ist<p>
</p> <p>
</p>
<p>Filereader-Schnittstellenereignis: </p>
<p>
<strong>Onabort-Lese-Interrupt-Trigger </strong>
</p>Ein Fehler wird ausgelöst, wenn das Lesen fehlschlägt
<p>onloadstart wird ausgelöst, wenn der Lesevorgang beginnt </p>
<p>onprogress wird geladen</p>
<p>onload wird ausgelöst, wenn das Lesen erfolgreich ist </p>
<p>onloadend wird ausgelöst, nachdem der Lesevorgang abgeschlossen ist, unabhängig von Erfolg oder Misserfolg </p>
<p>Reden ohne Übung reicht nicht aus, lass uns hier ein kleines Experiment machen: </p>
<p></p>
<p><br><br>Kopiere den Code</p>
<div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode5'));">Der Code ist wie folgt:<u><div class="msgborder" id="phpcode5">
<br>Ich bin ein kleines Experiment <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title>< ;/title><br> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript "><br> $(document).ready(function () {<br> var bt = $('#wl');<br> var file = $('#file');<br> var type = $('#type');<br> var result = $('#result');<br> <br> var func = {};<br> func.readAsDataURL = function (file) {<br> //Überprüfen, ob es sich um ein Bild handelt<br> if (!/image/w /.test(file.type)) {<br> warning('non-image format');<br> return false;<br> }<br> var reader = new FileReader();<br> reader.readAsDataURL(file);<br> reader.onload = function (e) {<br> result.html('<img src="' this .result ' "/>');<br> }<br> }<br> <br> func.readAsBinaryString = function (file) {<br> <br> var reader = new FileReader();<br> reader.readAsBinaryString (file);<br> reader.onload = function (e) {<br> result.html(this.result);<br> }<br> }<br> <br> func.readAsText = function (file) {<br> <br> var reader = new FileReader();<br> reader.readAsText(file);<br> reader.onload = function (e) {<br> result.html(this.result );<br> }<br> }<br> <br> bt.click(function () {<br> if (func[type.val()] && typeof func[type.val()] == ' function') {<br> func[type.val()](file[0].files[0]);<br> }<br> });<br> <br> });<br> < ;/script> ;<br> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><br> <body><br> <div id="result"><br> </div><br> <input type="file " id= "file" multiple /><br> <select id="type"><br> <option value="readAsDataURL">readAsDataURL</option><br> <option value=" readAsBinaryString"> ;readAsBinaryString</option><br> <option value="readAsText">readAsText</option><br> </select><br> <button id="wl"><br> Datei lesen</button><br> <br> </body><br> </html><br> </div>
<br>
</u><p>Verwenden Sie den neuesten Browser, um es auszuprobieren! </p>
<p>Lassen Sie uns noch einmal ein Urteil fällen und uns die Reihenfolge der Ereignisausführung ansehen: </p>
<p> reader.onload = Funktion (e) {<br> alert('onprogress'); reader.onerror = reader.onloadstart = function (e) {<br> >
<br><br>Spezifische Anwendung hier: <br><br><br><br>
<br><br><br><br><br><br>Code kopieren</p>
<p><strong>Der Code lautet wie folgt:<br><div class="msgborder" id="phpcode6">
<br> 简单图片上传 <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title> Drag Tatsächlich habe ich vor dem Einfügen der API auch ein Drag-and-Drop-Plug-In mit jquery geschrieben. .
Einige Dinge, auf die ich bei der Arbeit gestoßen bin [Popup-Fenster] [Drag & Drop] [asynchroner Datei-Upload]
Aber die Integration in HTML5 ist sicherlich besser! ! ! Werfen wir jetzt einen Blick auf dieses Zeug. . . Und seine Leistung besteht nicht nur darin, den Browser zu ziehen, was erstaunlich ist (zum Hochladen das Bild ziehen)
In HTML5 können Bilder und Links standardmäßig per Drag & Drop verschoben werden. Andere Elemente müssen per Drag & Drop auf „draggable="true" gesetzt werden. Ich werde es sofort versuchen.
Code kopieren
| 
