HTML5 이미지 업로드 [파일 업로드] 인터넷에서 많은 정보를 찾아보니 크게 두 가지 방법이 있습니다.
1. 양식 제출 방법
<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. 양식 없이 제출:
<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>그게 다입니다. 이제 Ajax가 어떻게 코딩되는지에 대해 이야기해 보겠습니다. [from form 제출 방법은 js를 사용하거나 페이지 새로 고침을 직접 제출할 수도 있습니다.]
Ajax 인코딩에도 두 가지 유형이 있습니다.
1. Native 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 인터페이스를 사용하여 업로드 이미지 예제 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
