suchen

Heim >Web-Frontend >H5-Tutorial >HTML5-Haltepunkt-Wiederaufnahme-Upload-Beispielcode-Freigabe

HTML5-Haltepunkt-Wiederaufnahme-Upload-Beispielcode-Freigabe

黄舟
黄舟Original
2017-03-25 16:07:061737Durchsuche

HaltepunktUpload, was in Java zuverlässiger ist. Ich normalerweise Wählen Sie Flex. Ich gebe zu, dass ich es gerade angesprochen habe und mich damit nicht auskenne. HTML 5 hat ein Blob-Objekt (das File-Objekt erbt es), und dieses Objekt hat ein Methode Slice-Methode. Zusammen mit der Datei-API und WebStorage habe ich eine Demo zum Wiederaufnehmen von Segmenten erstellt. Nach dem Aufteilen einer Datei in kleine Teile werden die hochgeladenen Bytes abgelegt Informationen zum Leeren des Caches in LocalStorage finden Sie unter Chrome – HTML 5 Local Storage. Wenn der Upload das nächste Mal angehalten oder der Browser geschlossen wird, wird der Upload von diesem Knoten aus gestartet. Für den Demobetrieb stellen Sie bitte zunächst eine WS-Verbindung her und wählen Sie dann

Datei-Upload

Bitte akzeptieren Sie den Code:

Server: 

<!DOCTYPE html>
<html>
<head>
    <title>使用WebSocket实现断点续传文件</title>
    <meta charset="utf-8">
</head>
<script type="text/javascript" src="demo.js"></script>
 
<body onload="init();">
<button onclick="webSocketConn();">创建连接</button>(step1)
<div class="row">
      <label for="fileToUpload">Select a File to Upload</label>
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>(step2)
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
    <button onclick="sendFileName();uploadFile()">上传</button>(step3)
    <button onclick="pauseUpload()">暂停</button>
     <label id="progressNumber"></label>
</div>
<div id="msg" style="max-height: 400px; overflow:auto;min-height: 100px;">
</div>
</body>
</html>

Das obige ist der detaillierte Inhalt vonHTML5-Haltepunkt-Wiederaufnahme-Upload-Beispielcode-Freigabe. 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：Detaillierte Erläuterung der Codefälle der HTML5-Dateioperations-APINächster Artikel：Detaillierte Erläuterung der Codefälle der HTML5-Dateioperations-API

In Verbindung stehende Artikel

Mehr sehen