React+ajax+java实现上传图片并预览功能（图文教程）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React+ajax+java实现上传图片并预览功能（图文教程），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7575字，纯文字阅读大概需要11分钟。
内容图文
这篇文章主要介绍了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代码：
在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数据传输的
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
实现ajax拖拽上传文件（附有代码）
jquery ajax实现文件上传功能（附有代码）
如何解决Ajax的content-download时间过慢问题（详细分析）
以上就是React+ajax+java实现上传图片并预览功能（图文教程）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的React+ajax+java实现上传图片并预览功能（图文教程）全部内容，希望文章能够帮你解决React+ajax+java实现上传图片并预览功能（图文教程）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】