Ich verwende die HTML5-Datei-API, um ein Dokument (.doc/.docx/.pdf) hochzuladen. Und ich möchte diese Dokumentvorschau anzeigen, bevor ich sie auf den Server hochlade. Gibt es eine Möglichkeit, so etwas auf Client-Seite zu tun?
PS Google Docs Viewer ist nicht in Ordnung, da das Dokument über das Internet zugänglich sein muss.
Ich habe versucht, ein kleines Beispiel zu erstellen, und das würde eine PDF-Vorschau anzeigen, bevor eine PDF-Datei hochgeladen wird.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript PDF Viewer Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function PreviewImage() {
pdffile=document.getElementById("uploadPDF").files[0];
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
</script>
</head>
<body>
<input id="uploadPDF" type="file" name="myPDF"/>
<input type="button" value="Preview" onclick="PreviewImage();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
</div>
</body>
</html>
Funktioniert in Firefox 62 und 63, Chrome 70, Edge 42, aber nicht in IE11.
– Bugybunny
1. November 2018 um 15:50 Uhr
Dadurch werden alle MS-Word-Dateien in Firefox und Chrome heruntergeladen.
– Chitra
26. Februar 2019 um 11:40 Uhr
Raffael Felten
Ich bin mir nicht sicher, ob noch jemand diesen Thread überprüft, aber ich dachte, ich würde teilen, was ich getan habe. Das direkte Anzeigen einer Vorschau ist nicht möglich, aber Sie können ein Blob-Objekt der ausgewählten Datei erstellen. So etwas (jQuery):
$('#input').change(function (event) {
var file = URL.createObjectURL(event.target.files[0]);
$('element').append('<a href="' + file + '" target="_blank">' + event.target.files[0].name + '</a>');
});
Dieser Link öffnet einen neuen Browser-Tab und zeigt/lädt die Datei herunter. Das ist nicht wirklich schön, aber es funktioniert. Hier ist ein Beispiel: https://jsfiddle.net/j9gw023b/3/
Es ist besser, wenn Sie jsfiddle posten.
– TarangP
10. Januar 2018 um 12:03 Uhr
Dies war letztendlich die Antwort, die für mich funktioniert hat. Sie können den Blob in einem Objekt-Tag anzeigen, wodurch eine ordnungsgemäße Upload-Vorschau erstellt wird. Ich würde ein JSFiddle mit meinen Änderungen posten, aber ich kann ein eingebettetes Objekt nicht rendern, da es sich in einer Sandbox befindet.
– Memedon
8. Juni 2018 um 15:26 Uhr
Nein das ist nicht möglich.
Sie möchten, dass der Browser eine Datendatei anzeigt, die er nicht anzeigen sollte. Sie haben Office- oder PDF-Viewer (OK, zugegeben, PDF-Dateien müssen jetzt in Browsern enthalten sein …), um Ihre Datendateien anzuzeigen.
Wenn Sie eine Vorschau im Browser anzeigen möchten, müssen Sie sie zuerst hochladen und in einem “For-Preview”-Verzeichnis oder so speichern. Wenn OK, verschieben Sie es an seinen endgültigen Bestimmungsort, andernfalls löschen Sie es.
Das Datei-API ermöglicht es Ihnen, die Daten aus der Datei zu lesen, aber dann haben Sie die Mühe, sie zu analysieren und zu rendern. Mozilla hat eine veröffentlicht JavaScript-PDF-Vieweraber mir ist nichts für MS Office-Dateien bekannt.
Früher konnte man so etwas machen:
<object data="word.doc">You do not have Word installed on your machine</object>
Nicht sicher, ob dies noch unterstützt wird, aber wenn ja, könnten Sie JS verwenden, um dieses Objekt in die Seite einzufügen, um es in der Vorschau anzuzeigen.
Sie müssen es jedoch zuerst hochladen, bevor Sie es anzeigen können. Oder sprechen Sie vom lokalen Datenzugriff durch den Browser aus einem Online-HTML-Dokument? Das ist auf vielen Ebenen eine schlechte Idee.
– Bart Friedrichs
27. Juni 2013 um 13:37 Uhr
Das ist eine schreckliche Idee, aber wenn der Typ verzweifelt ist, kann er keinen anderen Weg sehen.
– ZorleQ
27. Juni 2013 um 14:01 Uhr
Wenn der Typ verzweifelt ist, sollte er den Auftrag ablehnen. Geben Sie es dem Kunden zurück und sagen Sie ihm, dass dies im Rahmen der Qualitäts-/Sicherheitsanforderungen, die er für seine Software stellt, nicht möglich ist. Liefern Sie lieber nichts als etwas, das weit unter Ihren Qualitätsstandards liegt. Es wird dich für immer jagen.
– Bart Friedrichs
27. Juni 2013 um 14:03 Uhr
Mavichow
Ajax lädt Ihre Datei hoch, dann nach dem hochgeladenen Rückgabepfadnamen und zeigt eine Vorschau an.
Der jQuery-File-Upload von blueimp hat mir super gefallen.
Sie können das Basis-Plugin anzeigen.
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
Sie müssen es jedoch zuerst hochladen, bevor Sie es anzeigen können. Oder sprechen Sie vom lokalen Datenzugriff durch den Browser aus einem Online-HTML-Dokument? Das ist auf vielen Ebenen eine schlechte Idee.
– Bart Friedrichs
27. Juni 2013 um 13:37 Uhr
Das ist eine schreckliche Idee, aber wenn der Typ verzweifelt ist, kann er keinen anderen Weg sehen.
– ZorleQ
27. Juni 2013 um 14:01 Uhr
Wenn der Typ verzweifelt ist, sollte er den Auftrag ablehnen. Geben Sie es dem Kunden zurück und sagen Sie ihm, dass dies im Rahmen der Qualitäts-/Sicherheitsanforderungen, die er für seine Software stellt, nicht möglich ist. Liefern Sie lieber nichts als etwas, das weit unter Ihren Qualitätsstandards liegt. Es wird dich für immer jagen.
– Bart Friedrichs
27. Juni 2013 um 14:03 Uhr
Lukas C.
Sie können es mit pdf tun, hier ist das Tutorial:
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
Weiß nicht, ob es für doc/docx möglich ist
Nein, das können Sie nicht. Sie benötigen einen Dokumentbetrachter auf der Clientseite. (Plugin zum Beispiel)
– Bart Friedrichs
27. Juni 2013 um 13:35 Uhr
Warum brauchst du das überhaupt? Können sie das Dokument nicht einfach selbst ansehen, bevor sie es hochladen?
– Svis
27. Juni 2013 um 13:36 Uhr
Könnten Sie vielleicht versuchen, einige Metadaten aus den Dateien zu extrahieren und diese als kleine Vernunftvorschau zu verwenden? Größe, Titel, Autor, erster Satz usw. Sollte zumindest mit docx möglich sein, von dem ich glaube, dass es nur XML ist?
– Svis
27. Juni 2013 um 13:48 Uhr
@Svish Gute Idee. Ich werde darüber nachdenken. Vielen Dank.
– Benutzer1189338
27. Juni 2013 um 13:49 Uhr