MUI的上傳圖片目前知道有兩種方式，一種見前面文章中關于圖片裁切時使用的base64作為字符串上傳，另外一種則是本篇章中所使用的plus.uploader方式，它是一種真正意義上的文件上傳，我們可以使用commons- fileupload組件來實現一個文件上傳的后臺，使用plus.uploader選擇相冊圖片進行提交上傳，詳細如下文。

本文章實現的特點：

(1)、基于Java的服務端文件上傳，可同時上傳多個文件，支出文件進度信息(第幾個文件，百分比)等；

(2)、MUI實現的文件上傳前端，同時支持Android和IOS不同平臺；

(3)、可以選擇上傳原圖或壓縮大小的圖片，同樣支持不同平臺；

(4)、一些其他MUI的API，如：alert、ajax、gallery等；

服務端代碼參考為：

@Override

protected voiddoGet(HttpServletRequest request,

HttpServletResponse response)throwsServletException, IOException {

log.info("######"+ CommonUtils.getClientIpAddress(request) +"訪問文件上傳######");

/*response.setHeader("Access-Control-Allow-Credentials", "false");

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Methods", "*");

response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");*/

booleanisMultipart = ServletFileUpload.isMultipartContent(request);

if(!isMultipart) {

log.info("######不是文件上傳的二進制表單提交######");

outputJSON(response,this.resultUpload(EnumResult.ERROR.getKey() ,"不是文件上傳的二進制表單提交",null));

return;

}

DiskFileItemFactory factory =newDiskFileItemFactory();

ServletContext servletContext =this.getServletConfig().getServletContext();

File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");

factory.setRepository(repository);

ServletFileUpload upload =newServletFileUpload(factory);

upload.setHeaderEncoding("utf-8");//上傳文件亂碼

upload.setSizeMax(1024*1024*50);//最大允許上傳50M

//定義圖片集合

List fileList =newArrayList();

List resultList = uploadFile(request, upload , fileList);

if(CollectionUtils.isNotEmpty(resultList)){

StringBuilder builder =newStringBuilder();//上傳失敗

for(String text : resultList) {

builder.append(text).append('\n');

}

System.out.println(builder.toString());

CommonUtils.outputJSON(response, builder.toString());

}

//文件上傳成功

outputJSON(response,this.resultUpload(EnumResult.SUCCESS.getKey() ,"上傳成功！", fileList));

log.info("######文件上傳處理完畢######");

}

private voidoutputJSON(HttpServletResponse response, Map resultUpload) {

String result = JSONObject.toJSONString(resultUpload);

System.out.println(result);

CommonUtils.outputJSON(response, result);

}

privateList uploadFile(HttpServletRequest request, ServletFileUpload upload , List fileList) {

List fileLists;

String imageServer = PropertiesUtils.getInstance().getProperty(EnumProperties.APPLICATION,"system.fileupload.information");

File imageFolder =newFile(imageServer + File.separator+"appUpload"+ File.separator+ DateUtil.getFormatDate());

if(! imageFolder.exists()){

imageFolder.mkdirs();

}

List resultList =newArrayList();

try{

upload.setProgressListener(newUploadProgressListener());

fileLists = upload.parseRequest(request);

Iterator iter = fileLists.iterator();

intindex = 1;

longrandomName = System.currentTimeMillis();

while(iter.hasNext()) {

FileItem item = iter.next();

if(item.isFormField()){

continue;//不處理普通文本框

}

String name = item.getName();

longsize = item.getSize();

if(StringUtils.isNotEmpty(name) && size != 0) {

File newFile =newFile(imageFolder , randomName +"_"+ (index++) + CommonUtils.getSuffixByText(name,"."));

try{

item.write(newFile);

fileList.add(CommonUtils.convertAbsolute2RealPath(newFile.getAbsolutePath()));

}catch(Exception e) {

log.error("寫入文件上傳出現錯誤：", e);

resultList.add("處理上傳文件：["+ name +"]失敗！");

}

}

}

}catch(FileUploadException e) {

log.error("文件上傳出現錯誤：", e);

resultList.add("上傳文件失敗！");

}

returnresultList;

功能預覽：

運行主頁面，選擇上傳畫質，分別有“正常”和“原圖”，正常則為plus.zip壓縮的默認大小(API里面可以對寬高的指定大小、百分比大小)，采用下拉框實現，在Android和IOS上顯示的效果也各不相同。

這里選中了3張圖片，使用mui中的9宮格布局，點擊其中任意一張圖片，則定位到此圖片使用previewImage進行效果圖預覽，在預覽圖片時，根據選中的是壓縮圖片或原圖進行顯示，這里顯示的圖片有時候看到的不是很清晰(過一會就清晰了)，提交到后臺時畫質不會模糊。

點擊第一張圖片預覽

上傳進度和百分比

上傳完成后顯示服務器端返回的圖片路徑(這里又有服務器端的壓縮)

假設選擇上傳原圖，這里是服務器上壓縮后的圖片大小

相關下載：

效果預覽.gif?(完整示例的動畫效果圖)

前臺代碼.jpg?(手抖前的最新代碼截圖)

前端代碼.zip?(手抖將代碼刪除了，這份兒代碼是基于能找回的最新版本上調整的)

看這里：

因為后端的代碼是基于一個框架的，代碼中依賴的各種工具類太多，就不一一提供了，需要的請聯系我。另外示例中的上傳地址可能不知在什么時候就過期了，因為我回頭會將其與用戶的token綁定的，非授權用戶無法再上傳，不過這可能是“很長”一段時間以后的事情了。

總結

以上是生活随笔為你收集整理的mui ajax 文件上传,MUI的图片上传和压缩的全部內容，希望文章能夠幫你解決所遇到的問題。

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