如何在網頁上顯示本地圖片？

-2

好的，你不能讓其他人訪問你的本地文件系統！你需要像Apache這樣的服務器服務，讓你的電腦每天24小時運行，確保它不會過熱，保證良好的安全性，甚至可以做到這一點。而且由於服務器管理費用昂貴且耗時，大多數人都會讓我們的主機爲我們提供（Webhosting）。

總之，如果你不想運行你自己的服務器，只需將它上傳到你選擇的webhoster就容易多了。

來源

2011-02-05 17:05:29 anroesti

4

從遠程HTML文件鏈接到本地圖像文件曾經是可能的，但不再是。

在Firefox自1.5版（背景和配置選項here）
在Internet Explorer我認爲自第8版（我相信我已經成功地在IE 7中做到了這一點，但我可以」找不到硬數據）
在Chrome中可能因爲永遠

參見this vulnerability report爲什麼這是一件好事。

我不認爲有一個解決方法。你只需要首先上傳圖像。

來源

2011-02-05 17:10:33

0

您必須設法回答文件請求並將您的文件移動到項目源附近。然後讓你的地址相對。這是我的代碼，適用於我：

package ir.cclever.example; 

import java.awt.List; 
import java.io.BufferedReader; 
import java.io.DataOutputStream; 
import java.io.File; 
import java.io.FileInputStream; 
import java.io.FileNotFoundException; 
import java.io.IOException; 
import java.io.InputStreamReader; 
import java.io.OutputStream; 
import java.io.PrintWriter; 
import java.net.ServerSocket; 
import java.net.Socket; 
import java.util.ArrayList; 
import java.util.Date; 
import java.util.regex.Matcher; 
import java.util.regex.Pattern; 

public class WellCloseWebServer { 

    public class clientInfo{ 
     public String ip; 
     public Date visitTime; 
    } 

    static ArrayList<clientInfo> clients = new ArrayList<clientInfo>(); 

    public void start() throws IOException { 
     ServerSocket listener = new ServerSocket(8181,1000); 
     System.out.println("Webserver starting up on port 8181"); 
     System.out.println("Waiting for connection"); 

     //==========================regex 
     String pathRegex = "(?<=GET /).+?(?= HTTP)"; 

     Pattern pathPattern = Pattern.compile(pathRegex); 
     //==========================/regex 

     try { 
      while (true) { 
       Socket socket = listener.accept(); 
       BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream())); 

       String wholeRequest = ""; 
       String line; 

       String requestHeaders = in.readLine(); 
       wholeRequest = wholeRequest.concat(requestHeaders + "\n<br>"); 

       while(!(line = in.readLine()).equals("")){ 
        wholeRequest = wholeRequest.concat(line + "\n<br>"); 
       } 

       wholeRequest = wholeRequest.concat("\n<br/>\n<br/>\nClient IP Address : " + socket.getRemoteSocketAddress().toString()); 
       wholeRequest = wholeRequest.concat("\n<br/>\n<br/>\nClient Opened Port : " + ((Integer)socket.getPort()).toString()); 

       clientInfo newClient = new clientInfo(); 
       newClient.ip = socket.getRemoteSocketAddress().toString(); 
       newClient.visitTime = new Date(); 
       clients.add(newClient); 

       Matcher pathMatcher = pathPattern.matcher(requestHeaders); 

       Boolean anyPath = pathMatcher.find(); 

       System.out.println("Connection, sending data to request : " + requestHeaders); 
       try { 
        PrintWriter out = new PrintWriter(socket.getOutputStream(), true); 
        DataOutputStream dos = new DataOutputStream(socket.getOutputStream()); 
        if (!anyPath) { 
         JustHello(out); 
        } 
        else { 
         String directory = pathMatcher.group(); 

         System.out.println(directory); 

         if (directory.toString().equals("pic")) { 
          JustPic(out); 
         } 
         else if(directory.toString().startsWith("server/")){ 
          getFile(directory,dos,true); 
         } 
         else if(directory.toString().endsWith("jpg")){ 
          getFile(directory,dos,false); 
         } 
         else if(directory.toString().equals("my.aspx")){ 
          mirror(out,wholeRequest); 
         } 
         else if(directory.toString().equals("clients.html")){ 
          WholeClients(out); 
         } 
         else{ 
          errorPage(out); 
         } 
        } 
       } catch (Exception e) { 
        // TODO Auto-generated catch block 
        e.printStackTrace(); 
       } finally { 
        socket.close(); 
       } 
      } 
     } 
     finally { 
      listener.close(); 
     } 
    } 

    private void InvalidRequestMethod(PrintWriter out, String string) { 
     // TODO Auto-generated method stub 
     out.println("HTTP/1.0 404 NOT FOUND"); 
     out.println("Content-Type: text/html"); 
     out.println("Server: Bot"); 
     // this blank line signals the end of the headers 
     out.println(""); 
     out.flush(); 
     // Send the HTML page 
     out.print("<!DOCTYPE html>\n<html>\n<head>\n<title>Just GET</title>\n<meta charset=\"UTF-8\">\n</head>\n<body>\nInvalid request mehtod! : "+ string +"\n</body>\n</html>"); 
     out.flush(); 
    } 

    private void errorPage(PrintWriter out) { 
     // TODO Auto-generated method stub 
     out.println("HTTP/1.0 404 NOT FOUND"); 
     out.println("Content-Type: text/html"); 
     out.println("Server: Bot"); 
     // this blank line signals the end of the headers 
     out.println(""); 
     out.flush(); 
     // Send the HTML page 
     out.print("<!DOCTYPE html>\n<html>\n<head>\n<title>Error 404 NOT FOUND!</title>\n<meta charset=\"UTF-8\">\n</head>\n<body>\nContent not found on server!\n</body>\n</html>"); 
     out.flush(); 
    } 

    private void WholeClients(PrintWriter out) { 
     // TODO Auto-generated method stub 
     out.println("HTTP/1.0 200 OK"); 
     out.println("Content-Type: text/html"); 
     out.println("Server: Bot"); 
     // this blank line signals the end of the headers 
     out.println(""); 
     out.flush(); 
     // Send the HTML page 
     out.print("<!DOCTYPE html>\n<html>\n<head>\n<title>Whole Clients</title>\n<meta charset=\"UTF-8\">\n</head>\n<body>\n"); 
     Integer i=0; 
     for (clientInfo item : clients) { 
      i++; 
      out.print("<br/>\n"+i.toString()+") ip : " + item.ip + " | visit time : " + item.visitTime.toString()); 
     } 
     out.print("\n</body>\n</html>"); 
     out.flush(); 
    } 

    private void mirror(PrintWriter out, String requestHeaders) { 
     // TODO Auto-generated method stub 
     out.println("HTTP/1.0 200 OK"); 
     out.println("Content-Type: text/html"); 
     out.println("Server: Bot"); 
     // this blank line signals the end of the headers 
     out.println(""); 
     out.flush(); 
     // Send the HTML page 
     out.print("<!DOCTYPE html>\n<html>\n<head>\n<title>My Info</title>\n<meta charset=\"UTF-8\">\n</head>\n<body>\n" + 
       requestHeaders.toString() + 
       "\n</body>\n</html>"); 
     out.flush(); 
    } 

    private void getFile(String directory, DataOutputStream os, boolean b) { 
     String CRLF = "\r\n"; 
     // Open the requested file. 
     String fileName = directory; 
     FileInputStream fis = null; 
     boolean fileExists = true; 
     try { 
     //(new File(fileName)).mkdirs(); 
     fis = new FileInputStream(fileName); 
     } catch (FileNotFoundException e) { 
     fileExists = false; 
     } 

     // Construct the response message. 
     String statusLine = null; 
     String contentTypeLine = null; 
     String entityBody = null; 
     if (fileExists) { 
     statusLine = "200 OK" + CRLF; 
     contentTypeLine = "Content-type: " + 
       contentType(fileName) + CRLF; 
     } else { 
     statusLine = "404 NOT FOUND" + CRLF; 
     contentTypeLine = "Content Not Found!" + CRLF; 
     entityBody = "<HTML>" + 
      "<HEAD><TITLE>Not Found</TITLE></HEAD>" + 
      "<BODY>Not Found</BODY></HTML>"; 
     } 

     // Send the status line. 
     try { 
      if (b) { 
       os.writeBytes(statusLine); 
       // Send the content type line. 
       os.writeBytes(contentTypeLine); 
       // Send a blank line to indicate the end of the header lines. 
       os.writeBytes(CRLF); 
      } 
      // Send the entity body. 
      if (fileExists) { 
      sendBytes(fis, os); 
      fis.close(); 
      } else { 
      os.writeBytes("File DNE: Content Not Found!"); 
      } 
     } catch (IOException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
     } catch (Exception e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
     } 
    } 

    private static String contentType(String fileName) { 
     if(fileName.endsWith(".htm") || fileName.endsWith(".html")) { 
      return "text/html"; 
     } 
     if(fileName.endsWith(".jpeg") || fileName.endsWith(".jpg")) { 
     return "image/jpeg"; 
     } 
     if(fileName.endsWith(".gif")) { 
     return "image/gif"; 
     } 
     if(fileName.endsWith(".png")) { 
      return "image/png"; 
      } 
     if(fileName.endsWith(".js")) { 
      return "text/javascript"; 
      } 
     if(fileName.endsWith(".css")) { 
      return "text/stylesheet"; 
      } 

     return "application/octet-stream"; 
     } 

    private static void sendBytes(FileInputStream fis, OutputStream os) 
     throws Exception { 
     // Construct a 1K buffer to hold bytes on their way to the socket. 
     byte[] buffer = new byte[1024]; 
     int bytes = 0; 

     // Copy requested file into the socket's output stream. 
     while((bytes = fis.read(buffer)) != -1) { 
      os.write(buffer, 0, bytes); 
      } 
     } 

    private void JustHello(PrintWriter out) { 
     // TODO Auto-generated method stub 
     out.println("HTTP/1.0 200 OK"); 
     out.println("Content-Type: text/html"); 
     out.println("Server: Bot"); 
     // this blank line signals the end of the headers 
     out.println(""); 
     out.flush(); 
     // Send the HTML page 
     out.print("<!DOCTYPE html>\n<html>\n<head>\n<title>Just Hello</title>\n<meta charset=\"UTF-8\">\n</head>\n<body>\nHello World\n</body>\n</html>"); 
     out.flush(); 
    } 

    private void JustPic(PrintWriter out) { 
     // TODO Auto-generated method stub 
     out.println("HTTP/1.0 200 OK"); 
     out.println("Content-Type: text/html"); 
     out.println("Server: Bot"); 
     // this blank line signals the end of the headers 
     out.println(""); 
     out.flush(); 
     // Send the HTML page 
     out.print("<!DOCTYPE html>\n<html>\n<head>\n<title>Just Pic</title>\n<meta charset=\"UTF-8\">\n</head>\n<body>\n<img src=\"/images/th.jpg\"/>\n</body>\n</html>"); 
     out.flush(); 
    } 
}

請參閱if子句，該子句響應以/ server開頭的請求。按照代碼處理請求。它將文件作爲文件傳輸器返回。所以這裏的地址「server/image.jpg」將是你在java中定期編程的地址。這個地址來自你的項目的根源。提到這個代碼必須有一個main來使用這個類。這對我來說非常適合。

來源

2014-08-17 18:08:12 ConductedClever

-1

我一直在尋找一個答案，每一個地方，我發現不可能的，但我得到了答案在這裏：

https://superuser.com/questions/224500/how-to-display-local-images-in-chrome-using-file-protocol

適用於Chrome非常好。

來源

2015-06-17 20:03:02

8

您可以使用FileReader.readAsDataURL()輕鬆做到這一點。用戶選擇一個圖像，你可以顯示它，而無需上傳。

下面是代碼：

function previewFile() { 
 
    // Where you will display your image 
 
    var preview = document.querySelector('img'); 
 
    // The button where the user chooses the local image to display 
 
    var file = document.querySelector('input[type=file]').files[0]; 
 
    // FileReader instance 
 
    var reader = new FileReader(); 
 

 
    // When the image is loaded we will set it as source of 
 
    // our img tag 
 
    reader.onloadend = function() { 
 
     preview.src = reader.result; 
 
    } 
 

 
    
 
    if (file) { 
 
     // Load image as a base64 encoded URI 
 
     reader.readAsDataURL(file); 
 
    } else { 
 
     preview.src = ""; 
 
    } 
 
    }

<input type="file" onchange="previewFile()"><br> 
 
    <img src="" height="200" alt="Image preview...">

來源

2015-12-09 12:10:02

如何在網頁上顯示本地圖片？

回答

相關問題