Heim >Web-Frontend >js-Tutorial >JavaScript implementiert die Upload- und Vorschaufunktion von TXT-Dateien

JavaScript implementiert die Upload- und Vorschaufunktion von TXT-Dateien

小云云Original: 2018-03-28 09:07:592818Durchsuche

Ich bin heute bei der Arbeit an einem Projekt zufällig auf diese Platte gestoßen. Da es sich um eine einfache TXT-Datei handelt, handelt es sich nur um Text. Wenn Sie eine Vorschau der Bilder benötigen, müssen Sie Papaparse und Jschardet verwenden. Hier gibt es nicht viele Beschreibungen.

Die Formularschaltfläche verwendet das onchange=”uploadfile()” -Ereignis von js. Der Funktionsfunktionscode lautet wie folgt:

//此处为txt文件上传预览的js代码
function uploadfile(){
 var file=$("#txt")[0].files[0];
 //判断上传文件是不是txt格式,判断后缀是不是.txt
 if(file.name.substr(-4).toLocaleLowerCase() != &#39;.txt&#39;){
  alert("请上传格式为txt的文件！");
  windows.location="test.jsp";//重新定位到上传txt文件页面
 }
 else//如果上传文件是txt文件，则显示文件的预览
 {
  var reader=new FileReader;
  reader.readAsText(file,&#39;gb2312&#39;);
  //reader.readAsDataURL(file);
  reader.onload=function(evt){
   var data=evt.target.result;  
   $(&#39;#textarea_id&#39;).val(data); 
  } 
 } 
}

Der Effekt ist wie folgt:

JavaScript implementiert die Upload- und Vorschaufunktion von TXT-Dateien

Aufforderung zum Hochladen eines Dateitypfehlers

Ergänzung:

js-Upload-Dateivorschau

1. FILE API

HTML5 bietet zwei Methoden, FIle und FileReader, die Dateiinformationen lesen und Dateien lesen.

2. Beispiel

<html>
<body>
<p id="test-image-preview" 
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </p>
<br/>
<p id="test-file-info"></p>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">
var
 fileInput = document.getElementById(&#39;test-image-file&#39;),
 info = document.getElementById(&#39;test-file-info&#39;),
 preview = document.getElementById(&#39;test-image-preview&#39;);
// 监听change事件:
fileInput.addEventListener(&#39;change&#39;, function () {
 // 清除背景图片:
 preview.style.backgroundImage = &#39;&#39;;
 // 检查文件是否选择:
 if (!fileInput.value) {
  info.innerHTML = &#39;没有选择文件&#39;;
  return;
 }
 // 获取File引用:
 var file = fileInput.files[0];
 // 获取File信息:
 info.innerHTML = &#39;文件: &#39; + file.name + &#39;<br>&#39; +
      &#39;大小: &#39; + file.size + &#39;<br>&#39; +
      &#39;修改: &#39; + file.lastModifiedDate;
 if (file.type !== &#39;image/jpeg&#39; && file.type !== &#39;image/png&#39; && file.type !== &#39;image/gif&#39;) {
  alert(&#39;不是有效的图片文件!&#39;);
  return;
 }
 // 读取文件:
 var reader = new FileReader();
 reader.onload = function(e) {
  var
   data = e.target.result; // &#39;data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...&#39;   
  preview.style.backgroundImage = &#39;url(&#39; + data + &#39;)&#39;;
 };
 // 以DataURL的形式读取文件:
 reader.readAsDataURL(file);
});
</script>
</body>
</html>

Die in Form von DataURL gelesene Datei ist eine Zeichenfolge, ähnlich wie data :image /jpeg;base64,/9j/4AAQSk...(base64-Kodierung)...,

wird häufig zum Festlegen von Bildern verwendet. Wenn eine serverseitige Verarbeitung erforderlich ist, senden Sie die Base64-Zeichenfolge und die folgenden Zeichen an den Server und dekodieren Sie sie mit Base64, um den binären Inhalt der Originaldatei zu erhalten.

3. Erläuterung

Der obige Code demonstriert auch eine wichtige Funktion von JavaScript, nämlich den Single-Threaded-Ausführungsmodus. In JavaScript wird die JavaScript-Ausführungs-Engine des Browsers bei der Ausführung von JavaScript-Code immer im Single-Thread-Modus ausgeführt. Das heißt, JavaScript-Code kann zu keinem Zeitpunkt von mehr als einem Thread gleichzeitig ausgeführt werden.

Sie fragen sich vielleicht, wie JavaScript, das im Single-Threaded-Modus ausgeführt wird, mit Multitasking umgeht?

In JavaScript ist das Ausführen von Multitasking tatsächlich ein asynchroner Aufruf. Der obige Code:

reader.readAsDataURL(file);

initiiert beispielsweise einen asynchronen Vorgang zum Lesen der Datei . Da es sich um eine asynchrone Operation handelt, wissen wir nicht, wann die Operation im JavaScript-Code endet. Daher müssen wir zuerst eine Rückruffunktion festlegen:

reader.onload = function(e) {
 // 当文件读取完成后，自动调用此函数:
};

Wenn die Das Lesen der Datei ist abgeschlossen. Schließlich ruft die JavaScript-Engine automatisch die von uns festgelegte Rückruffunktion auf. Wenn die Rückruffunktion ausgeführt wird, wurde die Datei bereits gelesen, sodass wir den Dateiinhalt sicher innerhalb der Rückruffunktion abrufen können.

Verwandte Empfehlungen:

JS-Code zum Hochladen und Anzeigen von TXT-Dateien

PHP-Methodenbeispiel zum zeilenweisen Lesen von TXT-Dateien

Beispiel einer PHP-Implementierung zum Hinzufügen von Inhalten zu einer TXT-Datei

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die Upload- und Vorschaufunktion von TXT-Dateien. 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：Einführung in die Funktionen apply und Math.max() in jsNächster Artikel：Einführung in die Funktionen apply und Math.max() in js

In Verbindung stehende Artikel

Mehr sehen