JS-Code zum Erstellen einer Vorschau des TXT-Datei-Uploads

Dieses Mal bringe ich Ihnen JS-Code zum Erstellen einer TXT-Datei-Upload-Vorschau. Was sind die Vorsichtsmaßnahmen für die Erstellung einer TXT-Datei-Upload-Vorschau mit JS-Code?

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() != '.txt'){
  alert("请上传格式为txt的文件！");
  windows.location="test.jsp";//重新定位到上传txt文件页面
 }
 else//如果上传文件是txt文件，则显示文件的预览
 {
  var reader=new FileReader;
  reader.readAsText(file,'gb2312');
  //reader.readAsDataURL(file);
  reader.onload=function(evt){
   var data=evt.target.result;  
   $('#textarea_id').val(data); 
  } 
 } 
}

Der Effekt ist wie folgt:

Nach einem Fehler beim Typ der hochgeladenen Datei fragen

Ergänzung:

js-Upload Dateivorschau

1. FILE API

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

2. Beispiel

<p 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></p>
<br>
<input>
<script>
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>

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 Zeichenfolge base64 und die folgenden Zeichen an den Server und verwenden Sie die Base64-Dekodierung, um den Binärinhalt 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 das Lesen der Datei abgeschlossen ist, ruft die JavaScript-Engine automatisch auf Die Callback-Funktion legen wir fest. Wenn die Rückruffunktion ausgeführt wird, wurde die Datei bereits gelesen, sodass wir den Dateiinhalt sicher innerhalb der Rückruffunktion abrufen können.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

HTML-Zeichenfolge in HTML-Tag konvertieren und verwenden

So passen Sie die Betriebsanmeldung in Vue.js an Formularcode

Das obige ist der detaillierte Inhalt vonJS-Code zum Erstellen einer Vorschau des TXT-Datei-Uploads. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!