当前位置: 开发笔记 > 前端 > 正文

React+ajax+java实现上传图片并预览功能

作者：叫我GYJ | 来源：互联网 | 2022-03-06 14:04

这篇文章主要介绍了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 (
   
    
    
     {this.state.uploadedFileGetUrl === '' &＃63; null :
      
       {this.state.uploadedFile}
       
      }
    
   
  )
 }
}

自己封装的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 &＃63; "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异步文件上传，servlet处理，含demo这篇，有兴趣可以看一下：

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 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 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数据传输的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

推荐阅读

js
JavaScript 跨域解决方案详解

本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术，包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]

蜡笔小新 2024-11-22 16:27:56
console
JavaScript 实现图片文件转Base64编码的方法

本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串，适用于Web前端开发中图片上传前的预处理。 ... [详细]

蜡笔小新 2024-11-19 12:43:15
js
使用jQuery与百度地图API实现地址转经纬度功能

本文详细介绍了如何利用jQuery和百度地图API将地址转换为经纬度，包括申请API密钥、页面构建及核心代码实现。 ... [详细]

蜡笔小新 2024-11-24 14:33:10
console
优化 DOM 以提升 JavaScript 性能

本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能，包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]

蜡笔小新 2024-11-21 18:16:19
js
深入理解：AJAX学习指南

本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用，旨在为初学者提供全面的学习资料。 ... [详细]

蜡笔小新 2024-11-20 17:58:54
js
深入理解PHP中的超全局变量与AJAX技术

本文详细介绍了PHP中的几种超全局变量，包括$GLOBAL、$_SERVER、$_POST、$_GET等，并探讨了AJAX的工作原理及其优缺点。通过具体示例，帮助读者更好地理解和应用这些技术。 ... [详细]

蜡笔小新 2024-11-24 16:35:09
chrome
PHP中处理HTTP头部信息的方法与技巧

本文详细介绍了在PHP中如何获取和处理HTTP头部信息，包括通过cURL获取请求头信息、使用header函数发送响应头以及获取客户端HTTP头部的方法。同时，还探讨了PHP中$_SERVER变量的使用，以获取客户端和服务器的相关信息。 ... [详细]

蜡笔小新 2024-11-24 16:12:27
json
PHP Memcached 使用详解

本文详细介绍了如何在PHP中使用Memcached进行数据缓存，包括服务器连接、数据操作、高级功能等。 ... [详细]

蜡笔小新 2024-11-24 09:51:34
json
将XML数据迁移至Oracle Autonomous Data Warehouse (ADW)

随着Oracle ADW的推出，数据迁移至ADW成为业界关注的焦点。特别是XML和JSON这类结构化数据的迁移需求日益增长。本文将通过一个实际案例，探讨如何高效地将XML数据迁移至ADW。 ... [详细]

蜡笔小新 2024-11-23 20:27:56
js
重学前端学习笔记（二十四）HTML里的链接元素

笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系& ... [详细]

蜡笔小新 2024-11-23 10:34:04
ajax
解析 .NET 中的 AJAX 技术

Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]

蜡笔小新 2024-11-22 18:18:57
scheme
Struts2 + json+ jquery 实现三级联动action和jsp代码竟然有小红叉，提示缺双引号，检查了转义符号也没缺啊，求解

publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]

蜡笔小新 2024-11-21 16:25:41
console
理解浏览器历史记录（2）hashchange、pushState

阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后，本打算去研究pushState，偶然在一些信息中发现了锚点变 ... [详细]

蜡笔小新 2024-11-20 20:05:37
js
php + layui 文件上传以及拖拽上传

HTML:　　将文件拖拽到此区域 ... [详细]

蜡笔小新 2024-11-20 14:27:32
js
Spring Boot使用AJAX从数据库读取数据异步刷新前端表格

　　近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能，因为表格只占页面的一小部分，不希望整个也页面都随之刷新，所以首先想到了使用AJAX来实现。　　以下介绍解决方法（请忽视 ... [详细]

蜡笔小新 2024-11-19 10:11:02

叫我GYJ

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章