本實例所做功能為發(fā)送帶附件郵件,可以上傳多個附件,操作為選擇一個附件以后自動上傳,然后繼續(xù)選擇附件,填寫完表單其他信息,點擊保存發(fā)送帶附件郵件。
HTML標簽
<input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/>
js初始化,設(shè)置全局文件名參數(shù)
var fileName = [];function initFileInput(id, url) {    $("#" + id).fileinput({      language: 'zh',       uploadAsync:false,      uploadUrl:url,      browseClass: "btn btn-secondary",      textEncoding:"UTF-8",      showUpload: false,      showPreview :true,      dropZoneEnabled: false,      maxFileCount:5,      fileActionSettings:{        showUpload: true      },      enctype:'multipart/form-data',      msgFilesTooMany: "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}!",    }).on("filebatchselected", function(event, files) {      $("#fileUpload").fileinput("upload");    }).on("filebatchuploadsuccess", function (event, data, previewId, index){      if(data.response.success == true)      {        fileName.push(data.response.fileName);      }else{        alert("上傳失敗!");      }      $("#fileUpload").fileinput("clear");      $("#fileUpload").fileinput("reset");    }).on('fileerror', function(event, data, msg) {       alert(msg);    });  }java后臺上傳文件代碼
@RequestMapping(value="/fileupload")  @ResponseBody  public Map<String, Object> fileUpload(HttpServletRequest request, HttpServletResponse response) {    ResourceBundle bundle = PropertyResourceBundle.getBundle("application");    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;    Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();    String rootPath = bundle.getString("upLoadUrl");    String filePath = rootPath;    Map<String, Object> map = new HashMap<>();    map = uploadFiles(filePath,fileMap);    return map;  }實際上傳操作,返回上傳操作經(jīng)過處理的文件名,保證服務(wù)器端文件名唯一
public Map<String, Object> uploadFiles(String savePath,Map<String,MultipartFile> fiLeMap){    Map<String, Object> map = new HashMap<>();    try {      String fileName = "";      if(fiLeMap!=null){        for(Map.Entry<String, MultipartFile> entity:fiLeMap.entrySet()){          MultipartFile f = entity.getValue();          if(f != null && !f.isEmpty()){            String uuid = UUID.randomUUID().toString();            fileName = uuid + "#" + f.getOriginalFilename();            File newFile = new File(savePath + "/" + fileName);             f.transferTo(newFile);          }        }      }      map.put("success", true);      map.put("fileName", fileName);      return map;    }catch (Exception e) {      map.put("success", false);      return map;   }}ajax提交其他表單參數(shù)和所傳附件文件名集合
$.ajax({      type: "POST",      url: 所需要請求地址,      dataType: "json",      traditional:true,      data: {        service:$("#service").select2('val').replace("All",""),        startTime:$("#start").val(),        endTime:$("#end").val(),        reason:$("#reason").val(),        fileName:JSON.stringify(fileName),        outterEmail:isOutterEmail,        innerEmail:isInnerEmail,        isSendEmail:isSendEmail,        subService:$("#subService").select2('val'),        runningStatus:$("#runningStatus").select2('val')      },      success: function(data){        $("#loadingModal").modal("hide");        fileName.splice(0,fileName.length);        alert(data.msg);        if(data.success) {          location.href = "revision";        }      },      error:function(xhr) {        $("#loadingModal").modal("hide");        alert("保存失敗");      }    });以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答