React+ajax는 이미지를 업로드하기 전에 미리보기를 구현합니다.-JS 튜토리얼-php.cn

이번에는 이미지를 업로드하기 전에 React+ajax를 사용하여 이미지를 미리 볼 수 있는 주의 사항을 가져왔습니다. 다음은 실제 사례입니다.

인터넷에 사진을 올리는 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 === '' ? 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('post', 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 백그라운드에서 이미지를 업로드하는 경우 인터넷에서 사용할 수 있는 예가 많이 있습니다. ajax 비동기파일 업로드를 사용하세요. , 데모 기사를 포함한 서블릿 처리에 관심이 있으시면 다음을 살펴보세요.

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");

로그인 후 복사

는 크로스 도메인의 경우 물론 가능합니다. Unsafe

JSONObject result = new JSONObject();
result.put("uploadedFile", filename);
result.put("uploadedFileGetUrl", picUrl);
writer.write(result.toString());

로그인 후 복사

여기서 json 데이터는 페이지와 서버 간에 전송됩니다. 기사. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!