詳解React、ajax、java實現上傳圖片並預覽功能

React+ajax+java如何?上傳圖片並預覽？本文就和大家分享一下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代碼：

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後台上傳圖片方面，網上有很多例子都可以用，我借鑒的是http://blog.csdn.net/thc1987/article/details/15341201這篇，有興趣可以看一下：

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資料轉送的