1.首先為html代碼以及js代碼

<div id="uploadDiv" style="display:none;"><!-- The fileinput-button span is used to style the file input field as button --><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>文件選擇</span><!-- The file input field used as target for the file upload widget --><input id="fileupload" type="file" name="file" ></span><button id="uploadBtn" class="btn btn-primary disabled" >確認上傳</button><br><!-- The global progress bar --><div id="progress" class="progress"><div class="progress-bar progress-bar-success"></div></div><!-- The container for the uploaded files --><div id="msgDiv" class="files"></div></div>

$("#uploadBtn").click(function(){var dialog = $("#uploadDiv").clone().dialog({title: "附件上傳",width : '75%',height : 500,modal : true});$('#fileupload', dialog).fileupload({dataType: 'json',progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar', dialog).css('width',progress + '%').html(progress + '%');$("#msgDiv", dialog).html("處理中……");},add: function (e, data) {data.url = "ra/suspiciousCase/uploadTotal";data.submit();$("#uploadBtn", dialog).off('click').on('click', function () {var id = getUrlParam('id');data.url = "ra/suspiciousCase/upload?id="+id;data.submit();setTimeout(function(){handleUploadTable();}, 3000);//延遲執行刷新
                });},done: function (e, data) {var isTotal = data.url.indexOf("uploadTotal") > -1;var tip = isTotal ? "解析成功，請點擊“確認上傳”" : "上傳";var result = data.result;var msg = "<b>" + tip + "</b>"var bar = $('#progress .progress-bar');bar.removeClass("progress-bar-warning progress-bar-success");if(!result.success){msg = "<b>" + tip + "失敗：</b>"+result.error;bar.addClass("progress-bar-warning");$("#uploadBtn", dialog).addClass("disabled");}else{bar.addClass("progress-bar-success");msg = "<b>" + tip + "成功：</b>";if(isTotal){$("#uploadBtn", dialog).removeClass("disabled");}}if(result.totalInfo){msg += "<br>";msg += "<b>提示信息：</b>" + result.totalInfo;}msg += "<br><b>文件名稱：</b>" + data.files[0].name;$("#msgDiv", dialog).html(msg);}})})

再來是后臺代碼

@Path("/upload")@POST@NoCache@Consumes("multipart/form-data")public ExtJSResponse upload(@Context HttpServletRequest request) {ExtJSResponse resp = new ExtJSResponse(true);final String id = request.getParameter("id");final AmlSuspectcaseAttach attach = new AmlSuspectcaseAttach();boolean isMultipart= ServletFileUpload.isMultipartContent(request);  if(isMultipart){  //構造一個文件上傳處理對象  FileItemFactory factory = new DiskFileItemFactory();  ServletFileUpload upload = new ServletFileUpload(factory);  @SuppressWarnings("rawtypes")Iterator items;  try{  checkPermission(Permissions.AML_SUSPECT_CASE);//解析表單中提交的所有文件內容  items = upload.parseRequest(request).iterator();  while(items.hasNext()){  FileItem item = (FileItem) items.next();  if(!item.isFormField()){  //取出上傳文件的文件名稱  String name = item.getName();  logger.info("上傳文件的大小為：[{}]",item.getSize()); //取得上傳文件以后的存儲路徑  final String suffix = name.substring(name.lastIndexOf('.') + 1, name.length());int fsize = fileSize*1024*1024;if(fileSuffix.contains(suffix)){if(item.getSize() < fsize){Long attachId = null;if(!StringUtils.isEmpty(name)){attach.setName(name);}if(!StringUtils.isEmpty(id)){attach.setCaseid(Long.parseLong(id));attachId = suspectCase.insertAttch(attach);System.out.println("attach:"+attachId);}if(resp.isSuccess()){//上傳文件以后的存儲路徑  
logger.info("上傳文件：[{}]",attachId+"."+suffix);String Path= amlPath + File.separatorChar + attachId;  File file =new File(amlPath);//如果文件夾不存在則創建    if  (!file.exists()  && !file.isDirectory())      {file.mkdir();    } //上傳文件  logger.info("上傳文件的路徑為：[{}]",Path);File uploaderFile = new File(Path);  item.write(uploaderFile);}}else{logger.info("上傳文件大小不能超過2M");resp.setSuccess(false);resp.setErrorMsg("上傳文件大小不能超過2M");}}else{logger.info("文件格式不正確，請選擇doc、docx、xls、xlsx、png、gif、jpg、jpeg、bmp后綴文件！");resp.setSuccess(false);resp.setErrorMsg("文件格式不正確，請選擇doc、docx、xls、xlsx、png、gif、jpg、jpeg、bmp后綴文件！");}}  }  }catch(Exception e){  e.printStackTrace();  resp.setSuccess(false);resp.setErrorMsg("文件上傳失敗");}  }return resp;}@Path("/uploadTotal")@POST@NoCache@Consumes("multipart/form-data")public ExtJSResponse uploadTotal(@Context HttpServletRequest request) {ExtJSResponse resp = new ExtJSResponse(true);@SuppressWarnings("unused")InputStream instream = null;try {checkPermission(Permissions.AML_SUSPECT_CASE);ServletFileUpload upload = new ServletFileUpload();FileItemIterator fileIterator = upload.getItemIterator(request);while (fileIterator.hasNext()) {FileItemStream item = fileIterator.next();if ("file".equals(item.getFieldName())){instream  = item.openStream();break;} }StringBuilder total = new StringBuilder();resp.put("totalInfo", total);} catch (Exception e) {getLogger().warn(e.getMessage(), e);resp.setSuccess(false);resp.setErrorMsg(e.getLocalizedMessage());}return resp;}

其中uploadTotal方法是在文件上傳之前先對文件進行解析，下面貼上我的上傳效果圖，我這里是用的frame彈窗

解析完再點擊確認上傳之后就完成了。

?

轉載于:https://www.cnblogs.com/hcp9/p/5607667.html

總結

以上是生活随笔為你收集整理的用jQuery实现文件的上传，后台为spring+mybatis的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。