miniui實現多附件上傳
最近專案要開發一個多附件上傳問題管理的需求，我們專案前端用的是miniui +jquery ，於是去miniui官網看有沒有多附件上傳相關的元件，發現一個MultiUpload Window的表單控制元件，看了下原始碼基本上可以實現我想要的功能，下面貼一下我幾天的研究成果。
MultiUpload 是基於swfupload封裝好的一個多附件上傳的控制元件
請求頁面需要引入multiupload.css、swfupload.js、swfupload.swf、multiupload.js、cancel.gif，可以去官網下載原始碼拷貝到自己的專案中來
“uploadurl”要最好使用絕對路徑，相對路徑“/**/”可能出現請求404的問題
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/resources/context/jspBase.jsp"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" controller部分：
注意： 多個檔案上傳並不是一次性上傳多個檔案而是一個上傳完成後再上傳另一個，有幾個檔案就會請求幾次。
@ResponseBody
@RequestMapping("upload")
public Map<String, Object> upload(HttpServletRequest request,HttpServletResponse response) throws Exception{
//接收前臺傳過來的引數
String number = request.getParameter("number");
String attachmentType = request.getParameter("attachmentType");
String projectName = request.getParameter("projectName");
Map<String, Object> modelMap = new HashMap<String, Object>();
try {
//處理上傳檔案方法getFilesFromRequest
List<FileEntity> list = FileUtils.getFilesFromRequest(request);
if (list == null || list.size() == 0) {
throw new Exception("上傳失敗");
}
for (FileEntity entity : list) {
// response.getWriter().write(entity.getFileName());
newIssueService.fileUplode(number, attachmentType, entity);
IssueAttachment issueAttachment = new IssueAttachment();
issueAttachment.setIssueNumber(number);
issueAttachment.setProjectName(projectName);
issueAttachment.setFileName(entity.getFileName());
issueAttachment.setFileType(entity.getFileType());
if(attachmentType.equals("directCouseAttachment")){
//"1"表示上傳的是該種類的附件
issueAttachment.setDirectCouseAttachment("1");
}else if(attachmentType.equals("primaryCouseAttachment")){
issueAttachment.setPrimaryCouseAttachment("1");
}
else if(attachmentType.equals("designImprovementAttachment")){
issueAttachment.setDesignImprovementAttachment("1");
}else if(attachmentType.equals("processImproveAttachment")){
issueAttachment.setProcessImproveAttachment("1");
}else if(attachmentType.equals("improvementResultAttachment")){
issueAttachment.setImprovementResultAttachment("1");
}else if(attachmentType.equals("negativeEffectAttachment")){
issueAttachment.setNegativeEffectAttachment("1");
}else if(attachmentType.equals("designRuleAttachment")){
issueAttachment.setDesignRuleAttachment("1");
}else if(attachmentType.equals("ctqProjectManageAttachment")){
issueAttachment.setCtqProjectManageAttachment("1");
}
//寫入資料庫上傳檔案的相關資訊 issueAttachmentService.create(issueAttachment,attachmentType);
}
modelMap.put("success", "true");
} catch (Exception e) {
modelMap.put("success", "false");
}
return modelMap;
}/**
* 從request中提取上傳的檔案列表
*
* @param request HttpServletRequest
*/
public static List<FileEntity> getFilesFromRequest(HttpServletRequest request) {
List<FileEntity> files = new ArrayList<FileEntity>();
//多附件上傳需要用到的MultipartHttpServletRequest，可以度娘一下它的用法
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
try {
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
InputStream inputstream = entity.getValue().getInputStream();
if (!(inputstream.markSupported())) {
inputstream = new PushbackInputStream(inputstream, 8);
}
String fileName = entity.getValue().getOriginalFilename();
String prefix =
fileName.lastIndexOf(".") >= 1 ? fileName.substring(fileName.lastIndexOf(".") + 1)
: null;
FileEntity file = new FileEntity();
file.setInputStream(inputstream);
file.setFileType(prefix);
file.setFileName(fileName);
files.add(file);
}
} catch (IOException e) {
e.printStackTrace();
}
return files;
}/**
* issue附件上傳客戶端到伺服器
* @throws Exception
*/
public void fileUplode(String number,String attachmentType,FileEntity entity)
throws Exception {
//number為流水編號、attachmentType為上傳附件的型別，entity檔案實體類
OutputStream os = null;
try {
File outfile = creatTempFile(number,attachmentType);
File toFile = new File(outfile, entity.getFileName());
// 建立一個輸出流
os = new FileOutputStream(toFile);
// 設定快取
byte[] buffer = new byte[1024];
int length = 0;
// 讀取myFile檔案輸出到toFile檔案中
while ((length = entity.getInputStream().read(buffer)) > 0) {
os.write(buffer, 0, length);
}
} catch (Exception ex) {
String falsemes = "";
if (ex.getCause() != null) {
falsemes = ex.getCause().getMessage();
}
throw new Exception(ex.getMessage() + falsemes);
} finally {
try {
if (os != null) {
os.close();
}
} catch (IOException e) {
throw new Exception(e.getMessage());
}
}
}上傳面板頁面
function openW(e) {
var number = $("#issueForm")[0].issueNumber.value;
var projectName = $("#issueForm")[0].projectName.value;
mini.open({
title: "上傳面板",
//url: "src/uploadwindow.html",
url: "PmIssueController/multiupload",
width: 600,
height: 350,
allowResize: false,
onload: function () {
var iframe = this.getIFrameEl();
var data = {number: number ,attachmentType: e ,projectName: projectName}; //模擬傳遞上傳引數
iframe.contentWindow.SetData(data);
},
ondestroy: function (action) {
if (action == "ok") {
var iframe = this.getIFrameEl();
var data = iframe.contentWindow.GetData();
data = mini.clone(data);
var json = mini.encode(data);
// alert("已完成上傳資料：\n" + json);
}
}
})
}程式碼雖然不多，但是遇到的坑還是很多的^~^
希望小弟的一點經驗能給大家提供一些參考或者思路。
相關推薦
miniui實現多附件上傳
最近專案要開發一個多附件上傳問題管理的需求，我們專案前端用的是miniui +jquery ，於是去miniui官網看有沒有多附件上傳相關的元件，發現一個MultiUpload Window的表單控制元件，看了下原始碼基本上可以實現我想要的功能，下面貼一下我幾天
webAppIOS如何實現多附件上傳功能
webAppIOS如何實現多附件上傳功能 app中經常需要實現上傳附件的功能，webApp在android中可以通過inputfile調取檔案。】 ios存在沙盒機制，無法通過inputfile 獲取檔案路徑。可以通過原生ios將
h5通過input file方式實現多附件上傳
h5通過input file方式實現多附件上傳 web開發和h5開發中，經常都需要實現上傳多附件的功能。 實現思路： 1.模擬點選input file 2.監聽input file change事件，獲取檔案 3.將檔案轉換為blob二進位制
SpringMVC+Ajax+ajaxFileUpload實現多附件上傳
效果圖如下： 請求提交後儲存至根目錄，以統一信用編碼命名。 1.適用需求： 1）新增附件作為表單的一個輸入項，因此適用於提交表單資訊的同時要上傳附件的情況。（即：附件欄位只作為提交內容的附加資訊） 2）表單通過ajax提交 2）可以上傳多個檔案 2
bootstrap file input 實現多圖上傳功能
slow customer dex event view 文件 all shee end 官方文檔 http://plugins.krajee.com/ demo http://plugins.krajee.com/file-input-ajax-demo/3
springMvc多附件上傳帶進度條
html頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
php實現多圖上傳功能
總共三個文化 index.html conn.php upload.php index.html程式碼： <html> <head>上傳檔案</head> <body>
小程式實現多圖上傳、預覽
wxml <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd
前端H5實現多圖片上傳並預覽
多檔案上傳並預覽 利用input 的type='file" 可以實現檔案的上傳，不過只支援單個檔案上傳。只有給input加上multiple屬性才能實現多個檔案同時上傳。 好了，下面我們來實現一個簡單的多圖片上傳並預覽的例子 <div class="input-file-box
TP5實現多檔案上傳及展示
view層上傳： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body&
webuploader實現多檔案上傳
問題： 1： 上傳失敗，不知道怎麼在服務端寫返回值？ 2： 做個多檔案上傳怎麼辦？ 1：上傳失敗，不知道怎麼在服務端寫返回值？ （1）：首先在初始化Web Uploader 的方法寫上 server: 'http://localho
在SSM框架中使用AJAX實現多檔案上傳
今天來學習一下在SSM框架中使用ajax實現檔案的上傳。 1.首先我們需要一個搭建好的SSM框架專案，這個在這篇文章裡不是重點，自行先搭建好需要的專案。 這裡我是用的jsp頁面來和後臺介面關聯，在jsp檔案中我們需要一個form表單，請求方法為POST,enctype="mu
Java Web FormData格式資料流實現多檔案上傳
1.html <``input type="file" multiple="multiple" accept="image/gif, image/jpeg, image/png, image/jpg, image/bmp" /> 2.JS $(document).on("ch
java實現多檔案上傳01
1、html程式碼 <html> <head> <link rel="stylesheet" type="text/css" href="table.css" /> <link rel="stylesheet" type="text/css"
小程式如何實現多圖上傳、圖片預覽效果？（程式碼示例）
wxml程式碼： <view class="weui-uploader__hd"> <view class="weui-uploader__title">點選可預覽選好的圖片</view> <view class="weui-
Spring MVC實現多檔案上傳
1、修改POJO和DAO實現類 public class User{ //......其他屬性省略 private String idPicPath;//證件照路徑 private String workPicPath;//工作證照片路徑
java實現多檔案上傳至本地伺服器
博主最近在做一個內網專案，內部可以訪問外部資料，但是外部訪問不了內部資料，這也就造成了可能檔案無法上傳，所以博主另闢蹊徑，在本地伺服器上建立一個資料夾專門用來儲存上傳資料。 環境：jdk，tomcat 一、前臺上傳檔案（ajax上傳） <input type=
formData SSM 框架實現多圖上傳
formData部分程式碼： var formData = new FormData(); for(var ii = 0; ii < flag; ii++){ if (editor[ii
ASP.NET MVC實現多檔案上傳
要實現ASP.NET MVC中的多檔案上傳，其實最關鍵的一步是要在input上定義multiple屬性，使之可以支援多檔案上傳。 其實有幾個比較重要的地方，form一定要申明enctype=“multipart/form-data”，其次是 <input type=
ajax 利用formdata物件 實現多檔案上傳
$(function(){ $("#btn").click(function(){ var formData = new FormData(); for(var i=0; i<$('#file')[0].files.l