mui ajax 文件上传,MUI的图片上传和压缩
MUI的上傳圖片目前知道有兩種方式，一種見(jiàn)前面文章中關(guān)于圖片裁切時(shí)使用的base64作為字符串上傳，另外一種則是本篇章中所使用的plus.uploader方式，它是一種真正意義上的文件上傳，我們可以使用commons- fileupload組件來(lái)實(shí)現(xiàn)一個(gè)文件上傳的后臺(tái)，使用plus.uploader選擇相冊(cè)圖片進(jìn)行提交上傳，詳細(xì)如下文。
本文章實(shí)現(xiàn)的特點(diǎn)：
(1)、基于Java的服務(wù)端文件上傳，可同時(shí)上傳多個(gè)文件，支出文件進(jìn)度信息(第幾個(gè)文件，百分比)等；
(2)、MUI實(shí)現(xiàn)的文件上傳前端，同時(shí)支持Android和IOS不同平臺(tái)；
(3)、可以選擇上傳原圖或壓縮大小的圖片，同樣支持不同平臺(tái)；
(4)、一些其他MUI的API，如：alert、ajax、gallery等；
服務(wù)端代碼參考為：
@Override
protected voiddoGet(HttpServletRequest request,
HttpServletResponse response)throwsServletException, IOException {
log.info("######"+ CommonUtils.getClientIpAddress(request) +"訪問(wèn)文件上傳######");
/*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("######不是文件上傳的二進(jìn)制表單提交######");
outputJSON(response,this.resultUpload(EnumResult.ERROR.getKey() ,"不是文件上傳的二進(jìn)制表單提交",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("寫入文件上傳出現(xiàn)錯(cuò)誤：", e);
resultList.add("處理上傳文件：["+ name +"]失敗！");
}
}
}
}catch(FileUploadException e) {
log.error("文件上傳出現(xiàn)錯(cuò)誤：", e);
resultList.add("上傳文件失敗！");
}
returnresultList;
功能預(yù)覽：
運(yùn)行主頁(yè)面，選擇上傳畫質(zhì)，分別有“正常”和“原圖”，正常則為plus.zip壓縮的默認(rèn)大小(API里面可以對(duì)寬高的指定大小、百分比大小)，采用下拉框?qū)崿F(xiàn)，在Android和IOS上顯示的效果也各不相同。
這里選中了3張圖片，使用mui中的9宮格布局，點(diǎn)擊其中任意一張圖片，則定位到此圖片使用previewImage進(jìn)行效果圖預(yù)覽，在預(yù)覽圖片時(shí)，根據(jù)選中的是壓縮圖片或原圖進(jìn)行顯示，這里顯示的圖片有時(shí)候看到的不是很清晰(過(guò)一會(huì)就清晰了)，提交到后臺(tái)時(shí)畫質(zhì)不會(huì)模糊。
點(diǎn)擊第一張圖片預(yù)覽
上傳進(jìn)度和百分比
上傳完成后顯示服務(wù)器端返回的圖片路徑(這里又有服務(wù)器端的壓縮)
假設(shè)選擇上傳原圖，這里是服務(wù)器上壓縮后的圖片大小
相關(guān)下載：
效果預(yù)覽.gif?(完整示例的動(dòng)畫效果圖)
前臺(tái)代碼.jpg?(手抖前的最新代碼截圖)
前端代碼.zip?(手抖將代碼刪除了，這份兒代碼是基于能找回的最新版本上調(diào)整的)
看這里：
因?yàn)楹蠖说拇a是基于一個(gè)框架的，代碼中依賴的各種工具類太多，就不一一提供了，需要的請(qǐng)聯(lián)系我。另外示例中的上傳地址可能不知在什么時(shí)候就過(guò)期了，因?yàn)槲一仡^會(huì)將其與用戶的token綁定的，非授權(quán)用戶無(wú)法再上傳，不過(guò)這可能是“很長(zhǎng)”一段時(shí)間以后的事情了。
總結(jié)
以上是生活随笔為你收集整理的mui ajax 文件上传,MUI的图片上传和压缩的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 三菱modbusRTU通讯实例_实例 |
- 下一篇： linux以太网连接树莓派,如何在没有I