ajaxFileUpload 비동기 파일 업로드 사용 소개
- 不言원래의
- 2018-07-02 16:55:121484검색
이 기사에서는 주로 ajaxFileUpload를 사용하여 파일을 비동기식으로 업로드하는 방법을 소개합니다. jQuery 플러그인 AjaxFileUpload는 ajax 파일 업로드를 실현할 수 있습니다. 관심이 있으시면 자세히 알아볼 수 있습니다.
다음은 ajaxFileUpload에 대한 간략한 소개입니다. jQuery 플러그인 AjaxFileUpload는 ajax 파일 업로드를 실현할 수 있습니다. 우리 프로젝트는 jsp와 js를 분리한 아키텍처를 사용하므로 코드는 다음과 같습니다.
첫 번째는 jsp 부분입니다.
<!-- <form method="post"> -->
<input type="file" name="n_file" id="fileToUpload" value="上传表格" />
<button id="upload1" class="btn btn-default">上传</button>
<!-- </form> -->
여기서 양식이 주석 처리된 이유에 대해 설명하겠습니다. 디버깅 과정에서 이미 다른 양식이 있기 때문입니다. 다음은 js 코드 부분입니다.
$(function(){
//点击打开文件选择器
$("#upload1").on('click', function() {
//选择文件之后执行上传
$.ajaxFileUpload({
url:'supplyDataReportUploadExcel', //url自己写
secureuri:false, //这个是啥没啥用
type:'post',
fileElementId:'fileToUpload',//file标签的id
dataType: 'json',//返回数据的类型
//data:{name:'logan'},//一同上传的数据
success: function (data, status) {
// alert(data);
// alert(data.msg);
// alert(data.success);
if(data.success){
alert("upload,success!!!");
window.location.href='supplyDataReport';
}else{
alert(data.msg);
window.location.href='supplyDataReport';
}
}/*,
error: function (data, status, e) {
alert(e);
}*/
});
});
});
저는 js를 잘 못하는데 이것을 사용하여 완전히 복사할 수는 없습니다. js.프로젝트 구조의 실제 상황과 결합해야 하는데 일반적인 매개변수가 무엇인지에 대한 설명이 모두 작성되어 있습니다. 게시 유형은 요청에 해당하는 Controller 메서드의 method=RequestMethod.POST와 일치해야 합니다. dataType:'json'을 참고하세요. json의 경우에 주의하세요.
ps: 여기서는 data.success를 사용하는 판단이 후속 엔터티 클래스 AjaxJson과 관련이 있다고 말하고 싶습니다. ! ! ! !
그런데, 해당 js를 다음과 같이 jsp에 도입해야 합니다.
<script type="text/javascript">Core.js('./js/iface/upload');</script> <script type="text/javascript" src="libs/jquery/ajaxfileupload.js"></script>
첫 번째 단락에 소개된 업로드는 위 js의 내용이므로 우리가 가져온 js는 캡슐화되어 있습니다. 실제 상황에 따라 jQuery 플러그인 AjaxFileUpload의 다음 js 파일을 사용하여 직접 작성해 보세요.
다음 단계는 Controller 메소드가 응답하는 방식입니다.
@SuppressWarnings("resource")
@RequestMapping(value = "/supplyDataReportUploadExcel", method = RequestMethod.POST)
public @ResponseBody String supplyDataReportUploadExcel(HttpServletRequest request, HttpServletResponse response,MultipartFile n_file) throws Exception {
AjaxJson json = new AjaxJson();
ObjectMapper mapper = new ObjectMapper();
UploadFormBackVo uploadFormBackVo = new UploadFormBackVo();
//判断是否是空的Excel 包括没有标题
if(n_file.getSize()>0){
try{
//先判断 文件名 是否符合规格 因为不知道怎么获取上传文件的路径 后期修改
//获取文件
//验证文件名
String fileName = n_file.getOriginalFilename();
String fileNewName = fileName.replaceAll(".xls", "");
String eL = "[a-zA-Z]+[0-9]{4}-[0-9]{2}-[0-9]{2}";
Pattern p = Pattern.compile(eL);
Matcher m = p.matcher(fileNewName);
boolean dateFlag = m.matches();
if (!dateFlag) {
System.out.println("格式错误");
uploadFormBackVo.setFormName(n_file.getOriginalFilename());
uploadFormBackVo.setUploadTime(new Date());
uploadFormBackVo.setIfsuccess("上传失败，Excel文件名不符合规格！！！");
supplyDataReportService.insert(uploadFormBackVo);
json.setSuccess(false);
json.setMsg("Excel,NameError!!!");
String jsonStr = mapper.writeValueAsString(json);
return jsonStr;
}
//上传文件
UploadUtil.SaveFileFromInputStream(n_file.getInputStream(), "D:/补数据报表文件", n_file.getOriginalFilename());
InputStream is2 = new FileInputStream("D:/补数据报表文件/"+n_file.getOriginalFilename());
//读取文件进行内容验证
ExcelReader excelReader = new ExcelReader();
Map<Integer, SupplyDataReportBackVo> supplyDataReportBackVos = new HashMap<Integer, SupplyDataReportBackVo>();
String jsonStr = excelReader.readExcelContent(is2,supplyDataReportBackVos,json,n_file);
//判断 readExcelContent()解析Excel文件 是否符合规范 如果符合 修改相应数据
if(json.isSuccess()==true){
//遍历map 用value --》SupplyDataReportBackVo 调用 updateById方法
for(SupplyDataReportBackVo supplyDataReportBackVo : supplyDataReportBackVos.values()){
supplyDataReportService.updateById(supplyDataReportBackVo);
}
System.out.println("获得Excel表格的内容:");
for (int i = 1; i <= supplyDataReportBackVos.size(); i++) {
System.out.println(supplyDataReportBackVos.get(i));
}
//保存上传记录
uploadFormBackVo.setFormName(n_file.getOriginalFilename());
uploadFormBackVo.setUploadTime(new Date());
uploadFormBackVo.setIfsuccess("上传成功");
supplyDataReportService.insert(uploadFormBackVo);
return jsonStr;
}
// 解析Excel 文件 中 有空值 保存这次上传的记录且删除已上传的Excel文件， 删除已上传的Excel文件已在 readExcelContent()中处理
uploadFormBackVo.setFormName(n_file.getOriginalFilename());
uploadFormBackVo.setUploadTime(new Date());
uploadFormBackVo.setIfsuccess("上传失败，Excel中有空值！！！");
supplyDataReportService.insert(uploadFormBackVo);
return jsonStr;
} catch (IOException e){
System.out.println(e.getMessage());
}
}else{
//ajax返回的数据
json.setSuccess(false);
json.setMsg("Upload File Null!!!!!");
String jsonStr = mapper.writeValueAsString(json);
return jsonStr;
}
System.out.println("ajax请求成功");
return "";
/ json.setMsg("upload,success!!!");
}
이 메소드의 몇 가지 사항에 주의하세요. 나머지는 소유자 고유의 비즈니스 로직입니다. 두 번째로 전달된 매개변수는 MultipartFile n_file이고, 이 n_file은 jsp의 d5fd7aea971a85678ba271703566ebfd 태그에 있는 name 속성과 일치해야 합니다. 세 번째로 주목해야 할 것은 반환 값 Sting의 @ResponseBody 주석입니다. 주목해야 할 나머지 두 가지는 AjaxJson과 ObjectMapper입니다.
AjaxJson은 Ajax를 처리하는 데 사용되는 자체 캡슐화된 모델 클래스입니다. ObjectMapper의 경우 Baidu나 브레인스토밍을 사용할 수 있습니다. 아래에 AjaxJson을 붙여넣으세요:
package com.zhongxin.web.ops.adrule.model;
import java.util.Map;
public class AjaxJson {
private boolean success = true;
private String msg = "ok";
private Object obj = null;
private Map<String, Object> attributes;
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getObj() {
return obj;
}
public void setObj(Object obj) {
this.obj = obj;
}
public Map<String, Object> getAttributes() {
return attributes;
}
public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}
}
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 웹사이트를 주목해주세요!
관련 권장 사항:
jQuery 모바일 클래스 라이브러리 사용 시 탐색 기록을 로드하는 방법
Jquery ajax 기술은 N초마다 페이지에 값 전송을 실현합니다
위 내용은 ajaxFileUpload 비동기 파일 업로드 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!