主頁(yè) > 知識(shí)庫(kù) > React+ajax+java實(shí)現(xiàn)上傳圖片并預(yù)覽功能

React+ajax+java實(shí)現(xiàn)上傳圖片并預(yù)覽功能

之前有在網(wǎng)上找ajax上傳圖片的資料，大部分的人寫得都是用jQuery，但是在這里用JQuery就大才小用了，所以我就自己寫了，先上圖。

由上圖，首先點(diǎn)擊上面的選擇文件，在選擇圖片之后，將會(huì)自動(dòng)上傳圖片到服務(wù)器，并且返回圖片名字和圖片在服務(wù)器的路徑，然后在頁(yè)面顯示文件名字和圖片。

源碼：ajax上傳預(yù)覽

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() {//超時(shí)設(shè)置
   error();
  }, 10000);
  var xhr = new XMLHttpRequest();
  xhr.open('post', url);
  xhr.onreadystatechange = function() {
   if (xhr.readyState === 4) {
    clearTimeout(timeout);//清除超時(shí)
    if (xhr.status === 200){
     //alert(xhr.responseText);
     callback(JSON.parse(xhr.responseText));//調(diào)用回調(diào)函數(shù)
    } else {
     error();
    }
    xhr = null;// 刪除對(duì)象,防止內(nèi)存溢出
   }
  };
  xhr.onerror = function() {//如果產(chǎn)生了錯(cuò)誤
   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后臺(tái)上傳圖片方面，網(wǎng)上有很多例子都可以用，我借鑒的是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 = "/";
 // 存放臨時(shí)文件的目錄
 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");
  // 存放臨時(shí)文件的目錄,存放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"); // 設(shè)置編碼
  response.setCharacterEncoding("utf-8");
  response.setContentType("text/html;charset=UTF-8");
  // 獲得磁盤文件條目工廠
  DiskFileItemFactory factory = new DiskFileItemFactory();

  // 如果沒(méi)以下兩行設(shè)置的話，上傳大的 文件 會(huì)占用 很多內(nèi)存，
  // 設(shè)置暫時(shí)存放的 存儲(chǔ)室 , 這個(gè)存儲(chǔ)室，可以和 最終存儲(chǔ)文件 的目錄不同
  /**
   * 原理 它是先存到 暫時(shí)存儲(chǔ)室，然后在真正寫到 對(duì)應(yīng)目錄的硬盤上， 按理來(lái)說(shuō) 當(dāng)上傳一個(gè)文件時(shí)，其實(shí)是上傳了兩份，第一個(gè)是以 .tem
   * 格式的 然后再將其真正寫到 對(duì)應(yīng)目錄的硬盤上
   */
  factory.setRepository(new File(TEMP_FOLDER));
  // 設(shè)置 緩存的大小，當(dāng)上傳文件的容量超過(guò)該緩存時(shí)，直接放到 暫時(shí)存儲(chǔ)室
  factory.setSizeThreshold(1024 * 1024);

  // 高水平的API文件上傳處理
  ServletFileUpload upload = new ServletFileUpload(factory);

  try {
   // 提交上來(lái)的信息都在這個(gè)list里面
   // 這意味著可以上傳多個(gè)文件
   // 請(qǐng)自行組織代碼
   ListFileItem> list = upload.parseRequest(request);
   // 獲取上傳的文件
   FileItem item = getUploadFileItem(list);
   // 獲取文件名
   String filename = getUploadFileName(item);
   // 保存后的文件名
   String saveName = new Date().getTime()
     + filename.substring(filename.lastIndexOf("."));
   // 保存后圖片的瀏覽器訪問(wèn)路徑
   String picUrl = request.getScheme() + "://"
     + request.getServerName() + ":" + request.getServerPort()
     + request.getContextPath() + "/upload/" + saveName;

   System.out.println("存放目錄:" + PATH_FOLDER);
   System.out.println("文件名:" + filename);
   System.out.println("瀏覽器訪問(wèn)路徑:" + 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(ListFileItem> 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");
  // 索引到最后一個(gè)反斜杠
  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代碼這里修改了這幾點(diǎn)：

1、插入

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

這兩行代碼，進(jìn)行跨域，當(dāng)然，這個(gè)可能不安全

2、

JSONObject result = new JSONObject();
result.put("uploadedFile", filename);

result.put("uploadedFileGetUrl", picUrl);
writer.write(result.toString());

在這里，頁(yè)面和服務(wù)器之間使用json數(shù)據(jù)傳輸?shù)?/p>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Java使用Ajax實(shí)現(xiàn)跨域上傳圖片功能
使用Ajax進(jìn)行文件與其他參數(shù)的上傳功能(java開發(fā))
AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺(tái)】
Java后臺(tái)判斷ajax請(qǐng)求及處理過(guò)程詳解
使用jquery 的ajax 與 Java servlet的交互代碼實(shí)例
java模擬ajax訪問(wèn)另一個(gè)項(xiàng)目的controller代碼實(shí)例
Java+Ajax實(shí)現(xiàn)的用戶名重復(fù)檢驗(yàn)功能實(shí)例詳解
jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
AJAX+JAVA用戶登陸注冊(cè)驗(yàn)證的實(shí)現(xiàn)代碼
原生JavaScrpit中異步請(qǐng)求Ajax實(shí)現(xiàn)方法
Javaweb使用cors完成跨域ajax數(shù)據(jù)交互
Java使用Ajax異步上傳文件

標(biāo)簽：棗莊江蘇蚌埠廣元萍鄉(xiāng) 衡水衢州大理

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《React+ajax+java實(shí)現(xiàn)上傳圖片并預(yù)覽功能》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。