之前有在網上找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這篇，有興趣可以看一下：