当前位置：Gxlcms > AJAX > React+ajax+java实现上传图片并预览功能

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

时间：2021-07-01 10:21:17 帮助过：10人阅读

之前有在网上找ajax上传图片的资料，大部分的人写得都是用jQuery，但是在这里用JQuery就大才小用了，所以我就自己写了，先上图。

由上图，首先点击上面的选择文件，在选择图片之后，将会自动上传图片到服务器，并且返回图片名字和图片在服务器的路径，然后在页面显示文件名字和图片。

源码：ajax上传预览

React中：

  1. import React from 'react';
  2. import Http from './http'
  3. const URL = 'http://localhost:8080/fileuploadExample/UploadServlet';
  4. export default class App extends React.Component {
  5.  constructor(props) {
  6.   super(props);
  7.   this.state = {
  8.    uploadedFile: "",
  9.    uploadedFileGetUrl: ''
  10.   };
  11.  }
  12.  error() {
  13.   alert('error')
  14.  }
  15.  callback(result) {
  16.   this.setState({
  17.    uploadedFile: result.uploadedFile,
  18.    uploadedFileGetUrl: result.uploadedFileGetUrl
  19.   });
  20.  }
  21.  handleImageUpload(e) {
  22.   e.preventDefault()
  23.   let file = e.target
  24.   Http.post(URL, file, this.callback.bind(this), this.error)
  25.  }
  26.  render() {
  27.   return (
  28.    <div>
  29.     <input type="file" onChange={this.handleImageUpload.bind(this)}/>
  30.     <div>
  31.      {this.state.uploadedFileGetUrl === '' ? null :
  32.       <div>
  33.        <p>{this.state.uploadedFile}</p>
  34.        <img src={this.state.uploadedFileGetUrl} alt="你选择的图片"/>
  35.       </div>}
  36.     </div>
  37.    </div>
  38.   )
  39.  }
  40. }

自己封装的Ajax代码：

  1. var Http = (function() {
  2.  var http = {};
  3.  if (typeof window.XMLHttpRequest === "undefined") {
  4.   window.XMLHttpRequest = function() {
  5.    // 如果是i5就用Microsoft，其他就用Msxml2
  6.    return new window.ActiveXObject(navigator.userAgent
  7.      .indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP"
  8.      : "Msxml2.XMLHTTP");
  9.   };
  10.  }
  11.  http.post = function(url, data, callback, error) {
  12.   if (typeof data === "function") {//data可以不穿值
  13.    callback = data;
  14.    data = null;
  15.   }
  16.   var timeout = setTimeout(function() {//超时设置
  17.    error();
  18.   }, 10000);
  19.   var xhr = new XMLHttpRequest();
  20.   xhr.open('post', url);
  21.   xhr.onreadystatechange = function() {
  22.    if (xhr.readyState === 4) {
  23.     clearTimeout(timeout);//清除超时
  24.     if (xhr.status === 200){
  25.      //alert(xhr.responseText);
  26.      callback(JSON.parse(xhr.responseText));//调用回调函数
  27.     } else {
  28.      error();
  29.     }
  30.     xhr = null;// 删除对象,防止内存溢出
  31.    }
  32.   };
  33.   xhr.onerror = function() {//如果产生了错误
  34.    clearTimeout(timeout);
  35.    error();
  36.   };
  37.   xhr.send(http.formDataCode(data));
  38.  };
  39.  http.formDataCode = function(data) {
  40.   var fd = new FormData();
  41.   if (!data) {
  42.    return null;
  43.   }
  44.   for ( var key in data) {
  45.    if(data.files){
  46.     var file=data.files[0];
  47.     fd.append("image", file);
  48.    }else{
  49.     fd.append(key, data[key]);
  50.    }
  51.   }
  52.   return fd;
  53.  }
  54.  return http;
  55. })();
  56. export default Http

在java后台上传图片方面，网上有很多例子都可以用，我借鉴的是ajax异步文件上传，servlet处理，含demo这篇，有兴趣可以看一下：

  1. package com.example;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.util.Date;
  6. import java.util.List;
  7. import javax.servlet.ServletConfig;
  8. import javax.servlet.ServletContext;
  9. import javax.servlet.ServletException;
  10. import javax.servlet.annotation.WebServlet;
  11. import javax.servlet.http.HttpServlet;
  12. import javax.servlet.http.HttpServletRequest;
  13. import javax.servlet.http.HttpServletResponse;
  14. import net.sf.json.JSONObject;
  15. import org.apache.commons.fileupload.FileItem;
  16. import org.apache.commons.fileupload.disk.DiskFileItemFactory;
  17. import org.apache.commons.fileupload.servlet.ServletFileUpload;
  18. /**
  19.  * Servlet implementation class UploadServlet
  20.  */
  21. @WebServlet("/UploadServlet")
  22. public class UploadServlet extends HttpServlet {
  23.  private static final long serialVersionUID = 1L;
  24.  // 保存文件的目录
  25.  private static String PATH_FOLDER = "/";
  26.  // 存放临时文件的目录
  27.  private static String TEMP_FOLDER = "/";
  28.  /**
  29.   * @see HttpServlet#HttpServlet()
  30.   */
  31.  public UploadServlet() {
  32.   super();
  33.   // TODO Auto-generated constructor stub
  34.  }
  35.  @Override
  36.  public void init(ServletConfig config) throws ServletException {
  37.   // TODO Auto-generated method stub
  38.   super.init();
  39.   ServletContext servletCtx = config.getServletContext();
  40.   // 初始化路径
  41.   // 保存文件的目录
  42.   PATH_FOLDER = servletCtx.getRealPath("/upload");
  43.   // 存放临时文件的目录,存放xxx.tmp文件的目录
  44.   TEMP_FOLDER = servletCtx.getRealPath("/uploadTemp");
  45.  }
  46.  /**
  47.   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  48.   *  response)
  49.   */
  50.  protected void doGet(HttpServletRequest request,
  51.    HttpServletResponse response) throws ServletException, IOException {
  52.   response.setHeader("Access-Control-Allow-Origin",
  53.     "http://localhost:3000");
  54.   response.setHeader("Access-Control-Allow-Credentials", "true");
  55.   request.setCharacterEncoding("utf-8"); // 设置编码
  56.   response.setCharacterEncoding("utf-8");
  57.   response.setContentType("text/html;charset=UTF-8");
  58.   // 获得磁盘文件条目工厂
  59.   DiskFileItemFactory factory = new DiskFileItemFactory();
  60.   // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
  61.   // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
  62.   /**
  63.    * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
  64.    * 格式的 然后再将其真正写到 对应目录的硬盘上
  65.    */
  66.   factory.setRepository(new File(TEMP_FOLDER));
  67.   // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
  68.   factory.setSizeThreshold(1024 * 1024);
  69.   // 高水平的API文件上传处理
  70.   ServletFileUpload upload = new ServletFileUpload(factory);
  71.   try {
  72.    // 提交上来的信息都在这个list里面
  73.    // 这意味着可以上传多个文件
  74.    // 请自行组织代码
  75.    List<FileItem> list = upload.parseRequest(request);
  76.    // 获取上传的文件
  77.    FileItem item = getUploadFileItem(list);
  78.    // 获取文件名
  79.    String filename = getUploadFileName(item);
  80.    // 保存后的文件名
  81.    String saveName = new Date().getTime()
  82.      + filename.substring(filename.lastIndexOf("."));
  83.    // 保存后图片的浏览器访问路径
  84.    String picUrl = request.getScheme() + "://"
  85.      + request.getServerName() + ":" + request.getServerPort()
  86.      + request.getContextPath() + "/upload/" + saveName;
  87.    System.out.println("存放目录:" + PATH_FOLDER);
  88.    System.out.println("文件名:" + filename);
  89.    System.out.println("浏览器访问路径:" + picUrl);
  90.    // 真正写到磁盘上
  91.    item.write(new File(PATH_FOLDER, saveName)); // 第三方提供的
  92.    PrintWriter writer = response.getWriter();
  93.    System.out.print("{");
  94.    System.out.print("uploadedFile:"+ "\"" + filename + "\"");
  95.    System.out.print(",uploadedFileGetUrl:\"" + picUrl + "\"");
  96.    System.out.print("}");
  97.    
  98.    JSONObject result = new JSONObject();
  99.    result.put("uploadedFile", filename);
  100.    result.put("uploadedFileGetUrl", picUrl);
  101.    writer.write(result.toString());
  102.    writer.close();
  103.   } catch (Exception e) {
  104.    e.printStackTrace();
  105.    /*
  106.     * PrintWriter writer = response.getWriter(); writer.print("{");
  107.     * writer.print("error:"+e.toString()); writer.print("}");
  108.     * writer.close();
  109.     */
  110.   }
  111.  }
  112.  private FileItem getUploadFileItem(List<FileItem> list) {
  113.   for (FileItem fileItem : list) {
  114.    if (!fileItem.isFormField()) {
  115.     return fileItem;
  116.    }
  117.   }
  118.   return null;
  119.  }
  120.  private String getUploadFileName(FileItem item) {
  121.   // 获取路径名
  122.   String value = item.getName();
  123.   System.out.println(value + ":value");
  124.   // 索引到最后一个反斜杠
  125.   int start = value.lastIndexOf("/");
  126.   // 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
  127.   String filename = value.substring(start + 1);
  128.   return filename;
  129.  }
  130.  /**
  131.   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  132.   *  response)
  133.   */
  134.  protected void doPost(HttpServletRequest request,
  135.    HttpServletResponse response) throws ServletException, IOException {
  136.   doGet(request, response);
  137.  }
  138. }

以上java代码这里修改了这几点：

1、插入

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

这两行代码，进行跨域，当然，这个可能不安全

2、

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

在这里，页面和服务器之间使用json数据传输的

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！