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

JavaScript-Code implementiert die Upload-Vorschaufunktion von TXT-Dateien

亚连Original: 2018-05-28 17:16:102034Durchsuche

Dieser Artikel stellt Ihnen den JavaScript-Code zum Implementieren der Upload-Vorschaufunktion von TXT-Dateien vor. Die Kombination aus Text und Code wird sehr detailliert vorgestellt.

Ich habe es gerade geschafft um heute bei der Arbeit an einem Projekt darauf zu stoßen. Lassen Sie uns das aufzeichnen. 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-Code implementiert die Upload-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 können 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 Daten: 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 im JavaScript-Code nicht, wann die Operation endet. Daher müssen wir zuerst eine Rückruffunktion festlegen:

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

Wann Die Datei wird gelesen. Nach Abschluss 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So gehen Sie vor, wenn JQuery Ajax JSON zurückgibt.

So lösen Sie JQuery Ajax. Senden Sie chinesischen verstümmelten Code

So lösen Sie den chinesischen verstümmelten Code, wenn JQuery Ajax JSON zurückgibt

Das obige ist der detaillierte Inhalt vonJavaScript-Code implementiert die Upload-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：Angular verwendet die Operationsereignisanweisung ng-click, um beispielsweise mehrere Parameter zu übergebenNächster Artikel：Angular verwendet die Operationsereignisanweisung ng-click, um beispielsweise mehrere Parameter zu übergeben

In Verbindung stehende Artikel

Mehr sehen