如何在网页上显示本地图片？

Question

我需要在网页上展示图片而不上传。

之类的东西

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

怎么做？

Answer 1

您可以使用var el = document.getElementById( "el1" ); el.contentEditable = true; el.click(); el.focus(); <table> <tr> <td contenteditable="" data-model="phone_number" id='el1'>145</td> </tr> </table> 轻松完成此操作。用户选择图像，您无需上传即可显示图像。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

以下是代码：

＆＃13;

＆＃13;

FileReader.readAsDataURL()

＆＃13;

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 = "";
    }
  }

＆＃13;

＆＃13;

＆＃13;

Answer 2

从以前可能的远程HTML文件链接到本地​​图像文件，但不再是。

• 自1.5版以来的Firefox（背景和配置选项here）

• 在Internet Explorer中，我认为从版本8开始（我相信我已经在IE 7中成功完成了这项工作，但我找不到硬数据）

• 在Chrome中可能永远

例如，请参阅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();
    }
}

查看响应以/ server开头的请求的if子句。 按照代码处理请求。 它将文件作为文件传输器返回。 所以这里的地址＆＃34; server / image.jpg＆＃34;将是您在java中进行常规编程时提供的地址。此地址来自项目的根目录。 提到这段代码必须有一个main才能使用该类。 这对我来说很完美。

Answer 4

将图像文件放在.html文件旁边，然后仅使用src="image.jpg"（相对路径）。 将此仅用于教育目的。

Answer 5

我正在寻找一个答案和我发现不可能的地方，但我在这里得到了答案：

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

在chrome上工作得非常好。

Answer 6

好的，你不能让其他人访问你的本地文件系统！您需要像Apache这样的服务器服务，让您的计算机每天24小时运行，确保它不会过热，注意良好的安全性以及更多甚至可以做到这一点。而且由于服务器管理既昂贵又耗时，大多数人都会让专业人士为我们托管我们的东西（Webhosting）。

总之，如果您不想运行自己的服务器，只需将其上传到您选择的Webhoster就会容易得多。