찾다
백엔드 개발PHP 튜토리얼이미지 업로드 및 미리보기 기능 구현을 위한 React, ajax, java에 대한 자세한 설명

React+ajax+java를 사용하여 이미지를 업로드하고 미리 보는 방법은 무엇입니까? 이 글은 React, ajax, java를 사용하여 이미지를 업로드하고 미리보기하는 기능을 공유할 것입니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

인터넷에 사진을 올리는 ajax에 대한 정보를 찾아보던 중 대부분이 jQuery를 사용해서 작성했는데, 여기서는 JQuery를 사용하는 것이 별로 쓸모가 없어서 위의 사진이 먼저 작성되었습니다.

위 사진에서 먼저 위의 선택 파일을 클릭하세요. 사진을 선택한 후 사진이 자동으로 서버에 업로드되며, 서버에 있는 사진의 이름과 경로가 반환됩니다. 그러면 파일 이름과 사진이 페이지에 표시됩니다.

소스 코드: ajax 업로드 미리보기

React:


import React from 'react';
import Http from './http'

const URL = 'http://localhost:8080/fileuploadExample/UploadServlet';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      uploadedFile: "",
      uploadedFileGetUrl: ''
    };
  }

  error() {
    alert('error')
  }

  callback(result) {
    this.setState({
      uploadedFile: result.uploadedFile,
      uploadedFileGetUrl: result.uploadedFileGetUrl
    });
  }

  handleImageUpload(e) {
    e.preventDefault()
    let file = e.target
    Http.post(URL, file, this.callback.bind(this), this.error)
  }

  render() {
    return (
      <p>
        <input type="file" onChange={this.handleImageUpload.bind(this)}/>
        <p>
          {this.state.uploadedFileGetUrl === &#39;&#39; ? null :
            <p>
              <p>{this.state.uploadedFile}</p>
              <img src={this.state.uploadedFileGetUrl} alt="你选择的图片"/>
            </p>}
        </p>
      </p>
    )
  }
}

자체 캡슐화된 Ajax 코드:


var Http = (function() {
  var http = {};
  if (typeof window.XMLHttpRequest === "undefined") {
    window.XMLHttpRequest = function() {
      // 如果是i5就用Microsoft,其他就用Msxml2
      return new window.ActiveXObject(navigator.userAgent
          .indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP"
          : "Msxml2.XMLHTTP");
    };
  }
  http.post = function(url, data, callback, error) {
    if (typeof data === "function") {//data可以不穿值
      callback = data;
      data = null;
    }
    var timeout = setTimeout(function() {//超时设置
      error();
    }, 10000);
    var xhr = new XMLHttpRequest();
    xhr.open(&#39;post&#39;, url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        clearTimeout(timeout);//清除超时
        if (xhr.status === 200){
          //alert(xhr.responseText);
          callback(JSON.parse(xhr.responseText));//调用回调函数
        } else {
          error();
        }
        xhr = null;// 删除对象,防止内存溢出
      }
    };
    xhr.onerror = function() {//如果产生了错误
      clearTimeout(timeout);
      error();
    };
    xhr.send(http.formDataCode(data));
  };
  http.formDataCode = function(data) {
    var fd = new FormData();
    if (!data) {
      return null;
    }
    for ( var key in data) {
      if(data.files){
        var file=data.files[0];
        fd.append("image", file);
      }else{
        fd.append(key, data[key]);
      }
    }
    return fd;
  }
  return http;
})();

export default Http

Java 백그라운드에서 이미지를 업로드하는 경우 인터넷에 많은 예가 있습니다. 사용할 수 있는 내용은 http://blog.csdn.net/thc1987/article/details/15341201에서 배웠습니다. 관심이 있으시면 살펴보세요:


package com.example;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * Servlet implementation class UploadServlet
 */
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  // 保存文件的目录
  private static String PATH_FOLDER = "/";
  // 存放临时文件的目录
  private static String TEMP_FOLDER = "/";

  /**
   * @see HttpServlet#HttpServlet()
   */
  public UploadServlet() {
    super();
    // TODO Auto-generated constructor stub
  }

  @Override
  public void init(ServletConfig config) throws ServletException {
    // TODO Auto-generated method stub
    super.init();

    ServletContext servletCtx = config.getServletContext();
    // 初始化路径
    // 保存文件的目录
    PATH_FOLDER = servletCtx.getRealPath("/upload");
    // 存放临时文件的目录,存放xxx.tmp文件的目录
    TEMP_FOLDER = servletCtx.getRealPath("/uploadTemp");
  }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    response.setHeader("Access-Control-Allow-Origin",
        "http://localhost:3000");
    response.setHeader("Access-Control-Allow-Credentials", "true");

    request.setCharacterEncoding("utf-8"); // 设置编码
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=UTF-8");
    // 获得磁盘文件条目工厂
    DiskFileItemFactory factory = new DiskFileItemFactory();

    // 如果没以下两行设置的话,上传大的 文件 会占用 很多内存,
    // 设置暂时存放的 存储室 , 这个存储室,可以和 最终存储文件 的目录不同
    /**
     * 原理 它是先存到 暂时存储室,然后在真正写到 对应目录的硬盘上, 按理来说 当上传一个文件时,其实是上传了两份,第一个是以 .tem
     * 格式的 然后再将其真正写到 对应目录的硬盘上
     */
    factory.setRepository(new File(TEMP_FOLDER));
    // 设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室
    factory.setSizeThreshold(1024 * 1024);

    // 高水平的API文件上传处理
    ServletFileUpload upload = new ServletFileUpload(factory);

    try {
      // 提交上来的信息都在这个list里面
      // 这意味着可以上传多个文件
      // 请自行组织代码
      List<FileItem> list = upload.parseRequest(request);
      // 获取上传的文件
      FileItem item = getUploadFileItem(list);
      // 获取文件名
      String filename = getUploadFileName(item);
      // 保存后的文件名
      String saveName = new Date().getTime()
          + filename.substring(filename.lastIndexOf("."));
      // 保存后图片的浏览器访问路径
      String picUrl = request.getScheme() + "://"
          + request.getServerName() + ":" + request.getServerPort()
          + request.getContextPath() + "/upload/" + saveName;

      System.out.println("存放目录:" + PATH_FOLDER);
      System.out.println("文件名:" + filename);
      System.out.println("浏览器访问路径:" + picUrl);

      // 真正写到磁盘上
      item.write(new File(PATH_FOLDER, saveName)); // 第三方提供的

      PrintWriter writer = response.getWriter();

      System.out.print("{");
      System.out.print("uploadedFile:"+ "\"" + filename + "\"");
      System.out.print(",uploadedFileGetUrl:\"" + picUrl + "\"");
      System.out.print("}");
      
      JSONObject result = new JSONObject();
      result.put("uploadedFile", filename);

      result.put("uploadedFileGetUrl", picUrl);
      writer.write(result.toString());
      writer.close();
    } catch (Exception e) {
      e.printStackTrace();
      /*
       * PrintWriter writer = response.getWriter(); writer.print("{");
       * writer.print("error:"+e.toString()); writer.print("}");
       * writer.close();
       */
    }
  }

  private FileItem getUploadFileItem(List<FileItem> list) {
    for (FileItem fileItem : list) {
      if (!fileItem.isFormField()) {
        return fileItem;
      }
    }
    return null;
  }

  private String getUploadFileName(FileItem item) {
    // 获取路径名
    String value = item.getName();
    System.out.println(value + ":value");
    // 索引到最后一个反斜杠
    int start = value.lastIndexOf("/");
    // 截取 上传文件的 字符串名字,加1是 去掉反斜杠,
    String filename = value.substring(start + 1);
    return filename;
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
  }

}

위의 Java 코드

1. 삽입


response.setHeader("Access-Control-Allow-Origin","http://localhost:3000");
response.setHeader("Access-Control-Allow-Credentials", "true");

이 두 줄의 코드는 물론 안전하지 않을 수 있습니다.

2,


JSONObject result = new JSONObject();
result.put("uploadedFile", filename);

result.put("uploadedFileGetUrl", picUrl);
writer.write(result.toString());

여기에 json 데이터가 있습니다. 페이지와 서버 사이에 전송됩니다

관련 권장사항:

이미지 업로드 및 미리보기를 위한 JavaScript 구현 코드_Javascript 기술

이미지 업로드 및 먼저 미리보기를 위한 Ajax 구현 방법

이미지 미리보기를 위한 nodejs 예제 코드 그리고 업로드

위 내용은 이미지 업로드 및 미리보기 기능 구현을 위한 React, ajax, java에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
PHP : 서버 측 스크립팅 언어 소개PHP : 서버 측 스크립팅 언어 소개Apr 16, 2025 am 12:18 AM

PHP는 동적 웹 개발 및 서버 측 응용 프로그램에 사용되는 서버 측 스크립팅 언어입니다. 1.PHP는 편집이 필요하지 않으며 빠른 발전에 적합한 해석 된 언어입니다. 2. PHP 코드는 HTML에 포함되어 웹 페이지를 쉽게 개발할 수 있습니다. 3. PHP는 서버 측 로직을 처리하고 HTML 출력을 생성하며 사용자 상호 작용 및 데이터 처리를 지원합니다. 4. PHP는 데이터베이스와 상호 작용하고 프로세스 양식 제출 및 서버 측 작업을 실행할 수 있습니다.

PHP 및 웹 : 장기적인 영향 탐색PHP 및 웹 : 장기적인 영향 탐색Apr 16, 2025 am 12:17 AM

PHP는 지난 수십 년 동안 네트워크를 형성했으며 웹 개발에서 계속 중요한 역할을 할 것입니다. 1) PHP는 1994 년에 시작되었으며 MySQL과의 원활한 통합으로 인해 개발자에게 최초의 선택이되었습니다. 2) 핵심 기능에는 동적 컨텐츠 생성 및 데이터베이스와의 통합이 포함되며 웹 사이트를 실시간으로 업데이트하고 맞춤형 방식으로 표시 할 수 있습니다. 3) PHP의 광범위한 응용 및 생태계는 장기적인 영향을 미쳤지 만 버전 업데이트 및 보안 문제에 직면 해 있습니다. 4) PHP7의 출시와 같은 최근 몇 년간의 성능 향상을 통해 현대 언어와 경쟁 할 수 있습니다. 5) 앞으로 PHP는 컨테이너화 및 마이크로 서비스와 같은 새로운 도전을 다루어야하지만 유연성과 활발한 커뮤니티로 인해 적응력이 있습니다.

PHP를 사용하는 이유는 무엇입니까? 설명 된 장점과 혜택PHP를 사용하는 이유는 무엇입니까? 설명 된 장점과 혜택Apr 16, 2025 am 12:16 AM

PHP의 핵심 이점에는 학습 용이성, 강력한 웹 개발 지원, 풍부한 라이브러리 및 프레임 워크, 고성능 및 확장 성, 크로스 플랫폼 호환성 및 비용 효율성이 포함됩니다. 1) 배우고 사용하기 쉽고 초보자에게 적합합니다. 2) 웹 서버와 우수한 통합 및 여러 데이터베이스를 지원합니다. 3) Laravel과 같은 강력한 프레임 워크가 있습니다. 4) 최적화를 통해 고성능을 달성 할 수 있습니다. 5) 여러 운영 체제 지원; 6) 개발 비용을 줄이기위한 오픈 소스.

신화를 폭로 : PHP가 실제로 죽은 언어입니까?신화를 폭로 : PHP가 실제로 죽은 언어입니까?Apr 16, 2025 am 12:15 AM

PHP는 죽지 않았습니다. 1) PHP 커뮤니티는 성능 및 보안 문제를 적극적으로 해결하고 PHP7.x는 성능을 향상시킵니다. 2) PHP는 최신 웹 개발에 적합하며 대규모 웹 사이트에서 널리 사용됩니다. 3) PHP는 배우기 쉽고 서버가 잘 수행되지만 유형 시스템은 정적 언어만큼 엄격하지 않습니다. 4) PHP는 컨텐츠 관리 및 전자 상거래 분야에서 여전히 중요하며 생태계는 계속 발전하고 있습니다. 5) Opcache 및 APC를 통해 성능을 최적화하고 OOP 및 설계 패턴을 사용하여 코드 품질을 향상시킵니다.

PHP vs. Python 토론 : 어느 것이 더 낫습니까?PHP vs. Python 토론 : 어느 것이 더 낫습니까?Apr 16, 2025 am 12:03 AM

PHP와 Python에는 고유 한 장점과 단점이 있으며 선택은 프로젝트 요구 사항에 따라 다릅니다. 1) PHP는 웹 개발, 배우기 쉽고 풍부한 커뮤니티 리소스에 적합하지만 구문은 현대적이지 않으며 성능과 보안에주의를 기울여야합니다. 2) Python은 간결한 구문과 배우기 쉬운 데이터 과학 및 기계 학습에 적합하지만 실행 속도 및 메모리 관리에는 병목 현상이 있습니다.

PHP의 목적 : 동적 웹 사이트 구축PHP의 목적 : 동적 웹 사이트 구축Apr 15, 2025 am 12:18 AM

PHP는 동적 웹 사이트를 구축하는 데 사용되며 해당 핵심 기능에는 다음이 포함됩니다. 1. 데이터베이스와 연결하여 동적 컨텐츠를 생성하고 웹 페이지를 실시간으로 생성합니다. 2. 사용자 상호 작용 및 양식 제출을 처리하고 입력을 확인하고 작업에 응답합니다. 3. 개인화 된 경험을 제공하기 위해 세션 및 사용자 인증을 관리합니다. 4. 성능을 최적화하고 모범 사례를 따라 웹 사이트 효율성 및 보안을 개선하십시오.

PHP : 데이터베이스 및 서버 측 로직 처리PHP : 데이터베이스 및 서버 측 로직 처리Apr 15, 2025 am 12:15 AM

PHP는 MySQLI 및 PDO 확장 기능을 사용하여 데이터베이스 작업 및 서버 측 로직 프로세싱에서 상호 작용하고 세션 관리와 같은 기능을 통해 서버 측로 로직을 처리합니다. 1) MySQLI 또는 PDO를 사용하여 데이터베이스에 연결하고 SQL 쿼리를 실행하십시오. 2) 세션 관리 및 기타 기능을 통해 HTTP 요청 및 사용자 상태를 처리합니다. 3) 트랜잭션을 사용하여 데이터베이스 작업의 원자력을 보장하십시오. 4) SQL 주입 방지, 디버깅을 위해 예외 처리 및 폐쇄 연결을 사용하십시오. 5) 인덱싱 및 캐시를 통해 성능을 최적화하고, 읽을 수있는 코드를 작성하고, 오류 처리를 수행하십시오.

PHP에서 SQL 주입을 어떻게 방지합니까? (준비된 진술, pdo)PHP에서 SQL 주입을 어떻게 방지합니까? (준비된 진술, pdo)Apr 15, 2025 am 12:15 AM

PHP에서 전처리 문과 PDO를 사용하면 SQL 주입 공격을 효과적으로 방지 할 수 있습니다. 1) PDO를 사용하여 데이터베이스에 연결하고 오류 모드를 설정하십시오. 2) 준비 방법을 통해 전처리 명세서를 작성하고 자리 표시자를 사용하여 데이터를 전달하고 방법을 실행하십시오. 3) 쿼리 결과를 처리하고 코드의 보안 및 성능을 보장합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.