之前有在网上找ajax上传图片的资料，大部分的人写得都是用jquery，但是在这里用jquery就大才小用了，所以我就自己写了，先上图。
由上图，首先点击上面的选择文件，在选择图片之后，将会自动上传图片到服务器，并且返回图片名字和图片在服务器的路径，然后在页面显示文件名字和图片。
源码：
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数据传输的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
bootstrap select2 动态从后台Ajax动态获取数据的代码
使用ajax跨域调用springboot框架的api传输文件
网友评论