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数据传输的
相关推荐:
javascript实现上传图片并预览的效果实现代码_javascript技巧
以上是详解React、ajax、java实现上传图片并预览功能的详细内容。更多信息请关注PHP中文网其他相关文章!

PHPSession失效的原因包括配置错误、Cookie问题和Session过期。1.配置错误:检查并设置正确的session.save_path。2.Cookie问题:确保Cookie设置正确。3.Session过期:调整session.gc_maxlifetime值以延长会话时间。

在PHP中调试会话问题的方法包括:1.检查会话是否正确启动;2.验证会话ID的传递;3.检查会话数据的存储和读取;4.查看服务器配置。通过输出会话ID和数据、查看会话文件内容等方法,可以有效诊断和解决会话相关的问题。

多次调用session_start()会导致警告信息和可能的数据覆盖。1)PHP会发出警告,提示session已启动。2)可能导致session数据意外覆盖。3)使用session_status()检查session状态,避免重复调用。

在PHP中配置会话生命周期可以通过设置session.gc_maxlifetime和session.cookie_lifetime来实现。1)session.gc_maxlifetime控制服务器端会话数据的存活时间,2)session.cookie_lifetime控制客户端cookie的生命周期,设置为0时cookie在浏览器关闭时过期。

使用数据库存储会话的主要优势包括持久性、可扩展性和安全性。1.持久性:即使服务器重启,会话数据也能保持不变。2.可扩展性:适用于分布式系统,确保会话数据在多服务器间同步。3.安全性:数据库提供加密存储,保护敏感信息。

在PHP中实现自定义会话处理可以通过实现SessionHandlerInterface接口来完成。具体步骤包括:1)创建实现SessionHandlerInterface的类,如CustomSessionHandler;2)重写接口中的方法(如open,close,read,write,destroy,gc)来定义会话数据的生命周期和存储方式;3)在PHP脚本中注册自定义会话处理器并启动会话。这样可以将数据存储在MySQL、Redis等介质中,提升性能、安全性和可扩展性。

SessionID是网络应用程序中用来跟踪用户会话状态的机制。1.它是一个随机生成的字符串,用于在用户与服务器之间的多次交互中保持用户的身份信息。2.服务器生成并通过cookie或URL参数发送给客户端,帮助在用户的多次请求中识别和关联这些请求。3.生成通常使用随机算法保证唯一性和不可预测性。4.在实际开发中,可以使用内存数据库如Redis来存储session数据,提升性能和安全性。

在无状态环境如API中管理会话可以通过使用JWT或cookies来实现。1.JWT适合无状态和可扩展性,但大数据时体积大。2.Cookies更传统且易实现,但需谨慎配置以确保安全性。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3 Linux新版
SublimeText3 Linux最新版

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。