지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > PHP 튜토리얼 > 이미지 업로드 및 미리보기 기능 구현을 위한 React, ajax, java에 대한 자세한 설명

이미지 업로드 및 미리보기 기능 구현을 위한 React, ajax, java에 대한 자세한 설명

小云云
풀어 주다： 2023-03-18 13:36:01
원래의
1809명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
ajax java react
원천：php.cn
이전 기사：PHP 보안 개발 라이브러리에 대한 자세한 설명 다음 기사：Ajax가 Java 백그라운드에 제출된 후 데이터를 처리하는 방법에 대한 자세한 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
Android의 React-Native에서 상태 업데이트가 작동하지 않습니다. 스와이프할 수 있는 가로 갤러리에 이미지 쌍이 있는 코드가 있습니다. 이제 두 이미지의 위쪽 부분을 클릭하면 이미지가 꺼지므로 isImage2Active를 상태로...
에서 2024-04-06 16:54:10
0
1
410
0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까? 제가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다. 이 코드펜에서(잘못된 코드를 양해해 주세요. 그냥 장난을 쳤을 뿐입니다) ...
에서 2024-04-06 16:29:50
0
2
490
잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...
에서 2024-04-06 16:25:39
0
1
346
React Three Fiber: 스크롤 이벤트가 지연되는 이유는 무엇입니까? ReactThreeFiber에는 카메라 줌 전체에 걸쳐 유지하려는 스프라이트를 생성하는 React 구성 요소가 있습니다. 알고리즘은 작동하는 것 같지만(시간이 지...
에서 2024-04-06 13:39:24
0
1
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿