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

前端  /  管理员 发布于 5年前   376

之前有在网上找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 (   <div>    <input type="file" onChange={this.handleImageUpload.bind(this)}/>    <div>     {this.state.uploadedFileGetUrl === '' ? null :      <div>       <p>{this.state.uploadedFile}</p>       <img src={this.state.uploadedFileGetUrl} alt="你选择的图片"/>      </div>}    </div>   </div>  ) }}

自己封装的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异步文件上传，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数据传输的

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