成为VIP用html5 ajax Java接口实现上传图片实例代码
html5图片上传【文件上传】，在网上找了很多资料，主要也就2种
1.from表单提交的方式
<form action=pushUserIcon method=post enctype=multipart/form-data>
<table>
<tr>
<td width=50 align=left>图片：</td>
<td><input type=file name=file/></td>
</tr>
<tr>
<td width=50 align=left>用户id：</td>
<td><input type=text name=userId/></td>
</tr>
<tr>
<td><input type=submit> </td>
</tr>
</table>
</form>
注意： enctype=multipart/form-data 必须要填
1.1.Java页面直接提交：
@RequestMapping(value=/pushUserIcon,method=RequestMethod.POST)
@ResponseBody
public String pushUserIcon(HttpServletRequest request, HttpServletResponse response) throws IOException,BaseException {
String result = null;
String userId = request.getParameter(userId);
try{
//转型为MultipartHttpRequest(重点的所在)
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
//获得第1张图片（根据前台的name名称得到上传的文件）
MultipartFile file = multipartRequest.getFile(file);
result = uploadImageServic.uploadFile(file, request, userId);
System.out.println(result: + result);
response.setContentType(text/html;charset=utf8);
response.getWriter().write(result: + result);
}catch(Exception e){
BaseException baseException = new BaseException(e);
baseException.setErrorMsg(Upload API Exception);
throw baseException;
}
return null;
}
1.2.原生js 和jQuery的网上有很多，这里就不多说了。
1.2.1. fromData创建的两种方式
var formData = new FormData($(#myForm)[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
//var formData = new FormData();//构造空对象，下面用append 方法赋值。
// formData.append(policy, );
// formData.append(signature, );
// formData.append(file, $(#file_upload)[0].files[0]);
2.不用from表单提交：
<table style=border: 1px solid black; width: 100%>
<tr>
<td width=50 align=left>图片：</td>
<td><input type=file id=imageFile name=img multiple=multiple/></td>
<td>
<input type=button value=调用 onclick=pushImg() />
</td>
</tr>
</table>
HTML就这些，我想大家应该都能看懂，下面就要说说这2种提交方式，Ajax是如何编码？【from表单提交方式也可以使用js或者直接提交页面刷新】
Ajax编码也有2种：
1.原生js
function sub()
{
var file = document.getElementById(imageFile);
var files = file.files;
for(var i = 0 ; i < files.length;i++)
{
uploadFile(files[i]);
}
}
var xhr = null;
function uploadFile(file) {
xhr = new XMLHttpRequest();
/* xhr.addEventListener(error, uploadFailed, false);
xhr.addEventListener(abort, uploadCanceled, false); */
xhr.open(post, upload/, true); //访问控制器是upload，后面必须加'/'否则会报错org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...,但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
var fd = new FormData();
fd.append(userID, 1);
fd.append(errDeviceType, 001);
fd.append(errDeviceID, 11761b4a-57bf-11e5-aee9-005056ad65af);
fd.append(errType, 001);
fd.append(errContent, XXXXXX);
fd.append(errPic, file);
xhr.send(fd);
xhr.onreadystatechange = cb;
}
function cb()
{
if(xhr.status == 200)
{
var b = xhr.responseText;
if(b == success){
alert(上传成功！);
}else{
alert(上传失败！);
}
}
}
2.jquery
function pushImg(obj) {
debugger;
var url = upload/; //访问控制器是upload，后面必须加'/'否则会报错org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...,但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
var param = $(#errorParameter).val();
var files = $(#imageFile).get(0).files[0]; //获取file控件中的内容
var fd = new FormData();
fd.append(userID, 1);
fd.append(errDeviceType, 001);
fd.append(errDeviceID, 11761b4a-57bf-11e5-aee9-005056ad65af);
fd.append(errType, 001);
fd.append(errContent, XXXXXX);
fd.append(errPic, files);
$.ajax({
type: POST,
contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
processData: false, //必须false才会自动加上正确的Content-Type
url: url,
data: fd,
success: function (msg) {
debugger;
var jsonString = JSON.stringify(msg);
$(#txtTd).text(jsonString)
alert(jsonString);
},
error: function (msg) {
debugger;
alert(error);
}
});
}
现在前端的就应该差不多了，现在就是接口了，我的参数和访问路径都好了，现在就差接口服务了：
spring mvc框架：
@RequestMapping(value = { upload })
public void pushErrorData(HttpServletRequest request,
HttpServletResponse response) throws BaseException {
String userID=request.getParameter(userID);
// 转型为MultipartHttpRequest(重点的所在)这个就是上面ajax中提到如果直接访问此接口而不加/，此转型就会报错
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
//MultipartFile file = multipartRequest.getFiles(errPic);//获取文件集合 对应 jquery $(#imageFile).get(0).files
// 获得第1张图片（根据前台的name名称得到上传的文件）
MultipartFile file = multipartRequest.getFile(errPic); //对应 jquery $(#imageFile).get(0).files[index]
Map<String, Object> map = new HashMap<String, Object>();
if (null!=file && !file.isEmpty()) {
try {
map = Common.uploadFile(file);
} catch (IOException e) {
BaseException baseException = new BaseException(e);
//baseException.setErrorMsg(imgErrorMsg);
throw baseException;
}
}
}
/**
* 图片上传
*
* @param file
* @return
* @throws IOException
* @throws BaseException
*/
public static Map<String, Object> uploadFile(MultipartFile file)
throws IOException, BaseException {
String fail = ConfigBundleHelper.getValue(busConfig, fail);//上传失败状态
String success = ConfigBundleHelper.getValue(busConfig, success);//上传成功状态
String errorMsg = ConfigBundleHelper.getValue(busConfig,imgErrorMsg);//上传错误信息
String filePath = ConfigBundleHelper.getValue(busConfig, filePath);//上传路径，本来是相对路径，但是在发布后路径会创建在tomcat的bin目录下，所以接口上传的路径是一个难题，我用的是绝对路径，等到发布到Linux环境中，通过配置文件修改路径为Linux中的资源地址【防止工程删除而资源文件不会丢失】，然后重新发布工程时再通过Linux的命令把我们需要的资源文件导入到我们发布的工程项目中。
String size = ConfigBundleHelper.getValue(busConfig, fileSize);
String interfaceService = ConfigBundleHelper.getValue(busConfig,
interfaceService);
long maxFileSize = (Integer.valueOf(size)) * 1024 * 1024;
String suffix = file.getOriginalFilename().substring(
file.getOriginalFilename().lastIndexOf(.));
long fileSize = file.getSize();
Map<String, Object> map = new HashMap<String, Object>();
if (suffix.equals(.png) || suffix.equals(.jpg)) {
if (fileSize < maxFileSize) {
// System.out.println(fileSize+fileSize);
String fileName = file.getOriginalFilename();
fileName = new String(fileName.getBytes(ISO-8859-1), UTF-8);
File tempFile = new File(filePath, new Date().getTime()
+ fileName);
try {
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdirs();//如果是多级文件使用mkdirs();如果就一层级的话，可以使用mkdir()
}
if (!tempFile.exists()) {
tempFile.createNewFile();
}
file.transferTo(tempFile);
} catch (IllegalStateException e) {
BaseException baseException = new BaseException(e);
baseException.setErrorMsg(errorMsg);
throw baseException;
}
map.put(SUCESS, success);
map.put(data,interfaceService + filePath + new Date().getTime() + tempFile.getName());
} else {
map.put(SUCESS, fail);
map.put(data, Image too big);
}
} else {
map.put(SUCESS, fail);
map.put(data, Image format error);
}
return map;
}
这是我在工作中所遇到到问题，分享给大家，希望大家不会在这个问题上花费大量的时间。谢谢
以上就是用html5 ajax Java接口实现上传图片实例代码的详细内容，更多请关注双恒网络其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
