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

  

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

  源码:http://download.csdn.net/detail/nsguf/9851189

  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后台上传图片方面,网上有很多例子都可以用,我借鉴的是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数据传输的

 本人第一次发布博文,请批评指正~~~

React+ajax+java 上传图片并预览的更多相关文章

  1. ajax之---上传图片和预览

    views.py def upload_img(request): nid=str(uuid.uuid4()) ret={'status':True,'data':None,'message':Non ...

  2. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  3. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  4. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  5. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  6. Java实现在线预览功能

    java实现在线预览功能,需要用到  jacob.dll jacob.jar   预览pdf所需js  pdfobject.min.js 将上传文件转为pdf保存. <div class=&qu ...

  7. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  8. java实现在线预览--poi实现word、excel、ppt转html

    java实现在线预览 - -之poi实现word.excel.ppt转html 简介 java实现在线预览功能是一个大家在工作中也许会遇到的需求,如果公司有钱,直接使用付费的第三方软件或者云在线预览服 ...

  9. java实现在线预览 - -之poi实现word、excel、ppt转html

    简介 java实现在线预览功能是一个大家在工作中也许会遇到的需求,如果公司有钱,直接使用付费的第三方软件或者云在线预览服务就可以了,例如永中office.office web 365(http://w ...

随机推荐

  1. 【WCF】错误处理(四):一刀切——IErrorHandler

    前面几篇烂文中所介绍到的错误方式,都是在操作协定的实现代码中抛出 FaultException 或者带泛型参数的detail方案,有些时候,错误的处理方法比较相似,可是要每个操作协定去处理,似乎也太麻 ...

  2. koa-中间件流程控制

    koa中间件执行流程 koa中间件的的执行顺序是洋葱模型,外层逐步向内,执行到最中间再逐步向外扩展,实现这个顺序的模型需要依赖于generator函数,它可以暂停执行将控制权交出,等到执行next再得 ...

  3. XML文档结构

    <?xml version="1.0" encoding="UTF-8"?> <books> <bool id="bk1 ...

  4. AngularJS1.X学习笔记14-动画(解读文档)

    最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...

  5. 关于苹果真机 getFullYear()返回值为NAN的问题

    问题描述: 在html页面中获得后台传过来的一个时间并显示在页面上,我用getFullYear() ,getMonth(),getDate()分别获得了年月日在电脑上和三星手机上页面都能正确的显示时间 ...

  6. ios 视频拼接/合成

    上面的图说明的是这个混合的过程,下面放代码: - (void)mergeAndExportVideos:(NSArray*)videosPathArray withOutPath:(NSString* ...

  7. 解决Json传输中文乱码问题

    1.如果是通过URL传递:----需要编码两次 var searchText = this.searchText(); searchText = encodeURI(searchText); sear ...

  8. 【Tomcat源码学习】-5.请求处理

    前四章节,主要对Tomcat启动过程中,容器加载.应用加载.连接器初始化进行了相关的原理和代码流程进行了学习.接下来开始进行接受网络请求后的相关处理学习.   一.整体流程      基于上一节图示进 ...

  9. HTML5 进阶系列:indexedDB 数据库

    前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...

  10. bootstrap快速入门笔记(六)-代码

    一,内联代码<code>:For example, <code><section></code> should be wrapped as inline ...