C# 下載FTP圖片並在瀏覽器控件中顯示
FTP圖片不能直接利用 img 空間顯示,必須先將圖片下載到本地web應用中,在利用 img控件的src屬性顯示。
1.建立ftp連接下載圖片
public void Download() { //獲取平台路徑,即:下載后的圖片保存路徑 Files/FTP/ string uploadFilePath = "Files/FTP/"; string filePath = Server.MapPath("/") + uploadFilePath.Replace("/", "\\"); //判斷是否存在此文件夾,如果不存在則創建文件夾 if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } //圖片下載后的名稱(可自己定義) string fileName = "20210417091239.jpg";
//FTP訪問路徑,我是在本地建立的FTP服務器。 string ftpPath = "ftp://192.168.5.101/20210417091239.jpg"; string sRet = "下載成功!"; FtpWebRequest reqFTP; try { FileStream outputStream = new FileStream(filePath + fileName, FileMode.Create); // 根據uri創建FtpWebRequest對象 reqFTP = (FtpWebRequest)FtpWebRequest.Create(new Uri(ftpPath)); // 指定執行什么命令 reqFTP.Method = WebRequestMethods.Ftp.DownloadFile; // 指定數據傳輸類型 reqFTP.UseBinary = true; reqFTP.UsePassive = false; // ftp用戶名和密碼 //reqFTP.Credentials = new NetworkCredential(); FtpWebResponse response = (FtpWebResponse)reqFTP.GetResponse(); // 把下載的文件寫入流 Stream ftpStream = response.GetResponseStream(); long cl = response.ContentLength; // 緩沖大小設置為2kb int bufferSize = 2048; int readCount; byte[] buffer = new byte[bufferSize]; // 每次讀文件流的2kb readCount = ftpStream.Read(buffer, 0, bufferSize); while (readCount > 0) { // 把內容從文件流寫入 outputStream.Write(buffer, 0, readCount); readCount = ftpStream.Read(buffer, 0, bufferSize); } //關閉兩個流和ftp連接 ftpStream.Close(); outputStream.Close(); response.Close(); //向前台輸出保存的文件(圖片名稱),便於img控件的src使用 returnValue = "{\"fileName\":\"" + "" + fileName + "\"}"; Response.Write(returnValue); Response.End(); } catch (Exception ex) { sRet = ex.Message; } }
2.前台img控件接收保存后的圖片路徑
function download(img) { //img可以是前端向后台傳的ftp參數,我這里是ftp圖片地址(根據自己需要傳) var json = img; //后台下載ftp $.ajax({ type: "POST", dataType: "json", url: "Labor.ashx?Method=Download", data: { json: json }, beforeSend: function () { load();//加載等待 }, complete: function () { disLoad(); }, success: function (data) { //src = "../Files/FTP/20210417091239.jpg" var simg = '../Files/FTP/' + data.fileName; $('#dahuikuimg').dialog({ title: '預覽', width: 600, height: 750, resizable: true, closed: false, cache: false, modal: true }); $("#simg").attr("src", simg); }, error: function (data) { } }); }
3.前端需要img控件用於裝載下載后的圖片
<div id='dahuikuimg'><img id="simg" /></div>