欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 16:29:30
之前有在网上找ajax上传图片的资料,大部分的人写得都是用jquery,但是在这里用jquery就大才小用了,所以我就自己写了,先上图。 由上图,首先点击上面的选择文...

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

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

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

源码

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后台上传图片方面,网上有很多例子都可以用,我借鉴的是这篇,有兴趣可以看一下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。