Heim >Web-Frontend >js-Tutorial >Datei-Upload und Anzeige der hochgeladenen Dateien
1. Problemhintergrund
Verwenden Sie die Datei-Upload-Komponentendatei, um die Datei hochzuladen und die Datei (Bild) anzuzeigen
2. Implementierungsquellcode
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传并展示文件路径</title> <script type="text/javascript" src="../js/jquery-1.12.3.js" ></script> <script> $(document).ready(function(){ $("#fileUpload").off().on("change",function(){ var fileUpload = $(this).val(); var proUrl = window.location.protocol; var pageUrl = window.location.host; var path = proUrl + "//" +pageUrl + "/AngularJS/pages/"; $("#uploadImg").attr("src",path+fileUpload); console.info(path+fileUpload); }); }); </script> </head> <body> <p> <input type="file" id="fileUpload" name="upload" /><br><br> <img id="uploadImg" style="max-width:90%" alt="Datei-Upload und Anzeige der hochgeladenen Dateien" > </p> </body> </html>
3. Implementierungsergebnisse
Das Obige ist der Inhalt des Datei-Uploads und der Anzeige der hochgeladenen Dateien Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!