HTML5-Bild-Upload [Datei-Upload], ich habe viele Informationen im Internet gefunden, es gibt hauptsächlich zwei Methoden
1 von der Formularübermittlungsmethode
<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>Nach dem Login kopieren
Hinweis: enctype="multipart/form-data" muss ausgefüllt werden
1.1 Java-Seite direkt einreichen:
@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;
}Nach dem Login kopieren
1.2 Es gibt viele native JS und jQuery im Internet, daher werde ich es nicht tun Gehen Sie hier auf Details ein.
1.2.1. Zwei Möglichkeiten zum Erstellen von 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]);Nach dem Login kopieren
2. Ohne Formular einreichen:
<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>Nach dem Login kopieren
Das war's für HTML. Ich denke, jetzt sollten wir über diese beiden Übermittlungsmethoden sprechen. [Die From-Formular-Übermittlungsmethode kann auch js verwenden oder die Seitenaktualisierung direkt senden]
Es gibt auch zwei Arten der Ajax-Codierung:
1. Natives 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("上传失败！");
}
}
}Nach dem Login kopieren
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");
}
});
}Nach dem Login kopieren
Jetzt die Front- Das Ende sollte fast da sein. Jetzt sind meine Parameter und Zugriffspfade fertig. Jetzt brauche ich nur noch den Schnittstellendienst:
Spring MVC Framework:
@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;
}Nach dem Login kopieren
这是我在工作中所遇到到问题，分享给大家，希望大家不会在这个问题上花费大量的时间。谢谢
Das obige ist der detaillierte Inhalt vonVerwendung der HTML5-Ajax-Java-Schnittstelle zum Implementieren des Hochladens von Bildbeispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
