वेब पेज में स्थानीय तस्वीर कैसे दिखें?

Question

मुझे इसे अपलोड किए बिना वेब पेज पर एक तस्वीर दिखाने की ज़रूरत है।

<img id="RuPic" src="file://localhost/D:/folder/image.jpg"/> 

ऐसा कुछ कैसे करें?

Answer 1

ठीक है, आप किसी और को अपनी स्थानीय फाइल सिस्टम को स्वीकार नहीं कर सकते हैं! आपको अपाचे जैसी सर्वर-सेवा की आवश्यकता होगी, अपने कंप्यूटर को दिन में 24 घंटे चलने दें, सुनिश्चित करें कि यह अधिक गरम न हो, अच्छी सुरक्षा की देखभाल करें और इसे और भी संभव बनाने के लिए और भी बहुत कुछ करें। और क्योंकि सर्वर-प्रशासन महंगा और समय लेने वाला है, ज्यादातर लोग समर्थक को हमारे लिए हमारे सामान (वेबहोस्टिंग) होस्ट करते हैं।

निष्कर्ष में, यदि आप अपना स्वयं का सर्वर नहीं चलाना चाहते हैं, तो इसे अपने पसंद के वेबहोस्टर पर अपलोड करना बहुत आसान है।

Answer 2

दूरस्थ HTML फ़ाइलों से स्थानीय छवि फ़ाइलों से लिंक करना संभव था, लेकिन अब नहीं है।

• Firefox में संस्करण 1.5 (पृष्ठभूमि और config विकल्प here)

• Internet Explorer में मैं संस्करण 8 के बाद से लगता के बाद से (मेरा मानना ​​है कि मैं सफलतापूर्वक IE 7 में यह किया है, लेकिन मैं यह कर सकते हैं ' टी कठिन डेटा खोजने)

• क्रोम में शायद हमेशा के लिए के बाद से

उदाहरण के लिए this vulnerability report देखें कि यह एक अच्छी बात क्यों है।

मुझे नहीं लगता कि कोई कामकाज है। आपको बस पहले छवि अपलोड करनी होगी।

Answer 3

आपको फ़ाइल अनुरोधों का उत्तर देने और अपनी फ़ाइलों को अपने प्रोजेक्ट स्रोत के पास ले जाने का एक तरीका बनाना होगा। फिर अपने संबोधन रिश्तेदार बनाओ।

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(); 
    } 
} 

यदि खंड है कि अनुरोध करता है कि/सर्वर के साथ शुरू करने के लिए प्रतिक्रिया करता है देखें: यह मेरा कोड जो मेरे लिए ठीक काम करता है है। उस कोड का पालन करें जहां यह अनुरोध को संभालता है। यह फ़ाइलों को एक फ़ाइल ट्रांसपोर्टर के रूप में देता है। इसलिए यहां "सर्वर/image.jpg" पता एक पता होगा जो आप जावा में नियमित प्रोग्रामिंग में देते हैं। यह पता आपकी परियोजना की जड़ से है। उल्लेख करते हैं कि इस कोड का उपयोग कक्षा का उपयोग करने के लिए मुख्य होना चाहिए। यह मेरे लिए बिल्कुल सही काम करता है।

Answer 4

मैं एक ही जवाब और हर जहाँ मैं असंभव पाया लिए देख रहा था, लेकिन मैं यहाँ जवाब मिला: क्रोम पर

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

काम करता है बहुत अच्छा।

Answer 5

आप FileReader.readAsDataURL() का उपयोग करके आसानी से ऐसा कर सकते हैं। उपयोगकर्ता एक छवि चुनता है और आप इसे अपलोड करने की आवश्यकता के बिना इसे प्रदर्शित कर सकते हैं।

अधिक जानकारी के लिए देख https://developer.mozilla.org/en-US/docs/Web/API/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...">