search
HomeBackend DevelopmentPHP TutorialDetailed explanation of React, ajax, and java to implement the function of uploading images and previewing them

How to upload images and preview them with React+ajax+java? This article will share with you the functions of uploading images and previewing images using React, ajax, and java. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

I have been looking for information on ajax uploading pictures on the Internet. Most people write using jQuery, but using JQuery here is of little use, so I wrote it myself. First, the picture above .

From the above picture, first click on the select file above. After selecting the picture, the picture will be automatically uploaded to the server, and the picture name and the path of the picture on the server will be returned. Then display the file name and image on the page.

Source code:ajax upload preview

In 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>
    )
  }
}

Self-encapsulated Ajax code:


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

In terms of uploading images in the Java background, there are many examples on the Internet that can be used. I learned from http://blog.csdn.net/thc1987/article/details/15341201 If you are interested, you can take a look at this article:


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

}

The above java code has been modified in these points:

1. Insert


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

These two lines of code are cross-domain. Of course, this may not be safe

2,


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

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

In Here,

related recommendations for using json data transmission between the page and the server:

javascript implements the effect of uploading images and previewing code_javascript skills

Ajax upload image and preview function implementation method

nodejs sample code to implement image preview and upload

The above is the detailed content of Detailed explanation of React, ajax, and java to implement the function of uploading images and previewing them. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
react中canvas的用法是什么react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发吗react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom有什么区别react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool