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 === '' ? null :
 <p>
 <p>{this.state.uploadedFile}</p>
 <img src={this.state.uploadedFileGetUrl} alt="你选择的图片"/>
 </p>}
 </p>
 </p>
 )
 }
}

自己封装的Ajax代码：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

实现ajax拖拽上传文件（附有代码）

jquery ajax实现文件上传功能（附有代码）

如何解决Ajax的content-download时间过慢问题（详细分析）