React+ajax+java实现上传图片并预览功能

React+ajax+java实现上传图片并预览功能

之前有在网上找ajax上传图片的资料，大部分的人写得都是用jquery，但是在这里用JQuery就大才小用了，所以我就自己写了，先上图。

由上图，首先点击上面的选择文件，在选择图片之后，将会自动上传图片到服务器，并且返回图片名字和图片在服务器的路径，然后在页面显示文件名字和图片。

源码：ajax上传预览AgGgLHuN

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 (

{this.state.uploadedFileGetUrl === '' ? null :

{this.state.uploadedFile}

)

}

}

自己封装的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 AgGgLHuN= 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这篇，有兴趣可以看一下：

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();

// 如果没以下两行设置的话，上传AgGgLHuN大的 文件 会占用 很多内存，

// 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同

/**

* 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem

* 格式的 然后再将其真正写到 对应目录的硬盘上

*/

factory.setRepository(new File(TEMP_FOLDER));

// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室

factory.setSizeThreshold(1024 * 1024);

// 高水平的API文件上传处理

ServletFileUpload upload = new ServletFileUpload(factory);

try {

// 提交上来的信息都在这个list里面

// 这意味着可以上传多个文件

// 请自行组织代码

List 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 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数据传输的

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。