转载http://www.cnblogs.com/WarBlog/p/4838255.html
html5图片上传【文件上传】
在网上找了很多资料,主要也就2种
1.from表单提交的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<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页面直接提交:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
@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创建的两种方式
1
2
3
4
5
6
|
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表单提交:
1
2
3
4
5
6
7
8
9
|
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
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框架:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
@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;
}
|
这是我在工作中所遇到到问题,分享给大家,希望大家不会在这个问题上花费大量的时间。谢谢