首页JavaScript 实现从 FTP 服务器读取和显示图片，输入用户名和密码

JavaScript 实现从 FTP 服务器读取和显示图片，输入用户名和密码

时间: 2023-11-30 13:03:06 浏览: 134

在 JavaScript 中，我们可以使用 XMLHttpRequest 对象来发送带有用户名和密码的 FTP 请求，以从 FTP 服务器读取和显示图片。以下是一个简单的代码示例： ``` <!DOCTYPE html> <html> <head> <title>FTP Image Display</title> </head> <body> <h1>FTP Image Display</h1> <img id="image" src="" alt="Image"><br><br> <label for="username">Username:</label> <input type="text" id="username"><br><br> <label for="password">Password:</label> <input type="password" id="password"><br><br> <button onclick="loadImage()">Load Image</button> <script> function loadImage() { var image = document.getElementById("image"); var xhr = new XMLHttpRequest(); xhr.open("GET", "ftp://example.com/image.jpg", true, document.getElementById("username").value, document.getElementById("password").value); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { var blob = this.response; var url = URL.createObjectURL(blob); image.src = url; } }; xhr.send(); } </script> </body> </html> ``` 这个页面包含了一个图片标签、两个输入框和一个按钮。当用户点击按钮时，页面会使用 XMLHttpRequest 对象从 FTP 服务器（地址为 ftp://example.com/image.jpg）读取图片，并将图片显示在页面上。在这个例子中，我们使用了 XMLHttpRequest 对象的 `open`、`responseType`、`onload` 和 `send` 方法来发送带有用户名和密码的 FTP 请求，并处理响应。当请求成功后，我们将响应的二进制数据转换为 URL，并将 URL 赋值给图片标签的 `src` 属性，以显示图片。

阅读全文