實現的思路用了一個保存信息的數組和一個圖片的數組 保持住兩者的順序一一對應 最後提交到後臺 下面貼出相關代碼 供有需要的同學參考
頁面：
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image" href="images/logo-ico.png">
<link rel="apple-touch-icon-precomposed" href="images/logo-ico.png">
<title>農產品基本信息管理</title>
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/select2/css/select2.min.css"/>
</head>
<body>
<!-- 當前位置 -->
<div class="location">當前位置：危害質量安全關鍵點信息管理 >> <a href="list">農產品基本信息管理</a> >> 新增</div>
<div class="con-main">
<!-- 查詢 按鈕 -->
<div class="form-box">
<form id="formId" action="#">
<input type="hidden" name="id" th:value="${pageData?.id}">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="form-table">
<tr>
<th><span>*</span>農產品類別</th>
<td><select name="cropscode" class="select2" onchange="getBreedCode(this.value);">
<option selected="selected" value="">請選擇</option>
<option th:selected="${pageData?.cropscode eq cropscode.cropscode}" th:each="cropscode : ${cropscode}"
th:value="${cropscode.cropscode}" th:text="${cropscode.cropsname}"></option>
</select></td>
<th><span>*</span>農產品</th>
<td><select name="breedcode" class="select2" onchange="getVarietiesCode(this.value);">
<option selected="selected" value="">請選擇</option>
</select></td>
<th><span>*</span>品種</th>
<td><select name="varietiescode" class="select2">
<option selected="selected" value="">請選擇</option>
</select></td>
</tr>
<tr>
<th><span>*</span>產品特色</th>
<td colspan="5"><textarea name="varietiescharacteristics" cols="" rows="4" style="width:100%;" th:text="${pageData?.varietiescharacteristics}" maxlength="1000"></textarea></td>
</tr>
<tr>
<th>營養價值</th>
<td colspan="5"><textarea name="nutritivevalue" cols="" rows="2" style="width:100%;" th:text="${pageData?.nutritivevalue}" maxlength="1000"></textarea></td>
</tr>
<tr>
<th>認證</th>
<td colspan="5"><select name="authentication" class="fl" style="width:40px;" onchange="choose(this);">
<option value="1" th:selected="${pageData?.authentication == 1}">是</option>
<option value="0" th:selected="${pageData?.authentication == 0}">否</option>
</select>
<div id="authenticationdom" class="qy-upload-box" th:style="'display:' + @{(${pageData?.authentication == 0} ? 'none' : '')}">
<input type="text" class="input-fixed" style="width:100%;" disabled/>
<ul class="set-box">
</ul>
<div style="padding-top:3px;">
<a class="upload add-map fr" style="margin:0;" onclick="uploaddom(0,this)">上傳證書文件</a>
</div>
</div>
</td>
</tr>
<tr>
<th>獲獎</th>
<td colspan="5"><select name="awardcertificate" class="fl" style="width:40px;" onchange="choose(this);">
<option value="1" th:selected="${pageData?.awardcertificate == 1}">是</option>
<option value="0" th:selected="${pageData?.awardcertificate == 0}">否</option>
</select>
<div id="awardcertificatedom" class="qy-upload-box" th:style="'display:' + @{(${pageData?.awardcertificate == 0} ? 'none' : '')}">
<input type="text" class="input-fixed" style="width:100%;" disabled/>
<ul class="set-box">
</ul>
<div style="padding-top:3px;">
<a class="upload add-map fr" style="margin:0;" onclick="uploaddom(1,this)">上傳獎項照片</a>
</div>
</div></td>
</tr>
<tr>
<th>檢測</th>
<td colspan="5"><select name="testreport" class="fl" style="width:40px;" onchange="choose(this);">
<option value="1" th:selected="${pageData?.testreport == 1}">是</option>
<option value="0" th:selected="${pageData?.testreport == 0}">否</option>
</select>
<div id="testreportdom" class="qy-upload-box" th:style="'display:' + @{(${pageData?.testreport == 0} ? 'none' : '')}">
<input type="text" class="input-fixed" style="width:100%;" disabled/>
<ul class="set-box">
</ul>
<div style="padding-top:3px;">
<a class="upload add-map fr" style="margin:0;" onclick="uploaddom(2,this)">上傳檢測報告</a>
</div>
</div></td>
</tr>
<tr>
<th>產品圖集</th>
<td colspan="5"><select name="image" class="fl" style="width:40px;" onchange="choose(this);">
<option value="1" th:selected="${pageData?.image == 1}">有</option>
<option value="0" th:selected="${pageData?.image == 0}">無</option>
</select>
<div id="imagedom" class="qy-upload-box" th:style="'display:' + @{(${pageData?.image == 0} ? 'none' : '')}">
<input type="text" class="input-fixed" style="width:100%;" disabled/>
<ul class="set-box">
</ul>
<div style="padding-top:3px;">
<a class="upload add-map fr" style="margin:0;" onclick="uploaddom(3,this)">上傳圖片</a>
</div>
</div>
</td>
</tr>
<tr>
<th>產品視頻</th>
<td colspan="5"><select name="video" class="fl" style="width:40px;" onchange="choose(this);">
<option value="1" th:selected="${pageData?.video == 1}">有</option>
<option value="0" th:selected="${pageData?.video == 0}">無</option>
</select>
<div id="videodom" class="qy-upload-box" th:style="'display:' + @{(${pageData?.video == 0} ? 'none' : '')}">
<input type="text" class="input-fixed" style="width:100%;" disabled/>
<ul class="set-box">
</ul>
<div style="padding-top:3px;">
<a class="upload add-map fr" style="margin:0;" onclick="uploaddom(4,this)">上傳視頻</a>
</div>
</div>
</td>
</tr>
</table>
</form>
<div class="btn-box"><a onclick="save()">保存</a><a onclick="preview()">預覽</a><a onclick="del()">刪除</a><a href="list">返回</a></div>
</div>
</div>
<!-- 增加彈出 -->
<div class="pop-box" id="file_new" style="display:none;">
<div class="title"><a class="close" onclick="file_new.style.display=(file_new.style.display='none');">×</a><span>上傳文件</span></div>
<div class="pop-con">
<form id="file_new_form" action="#">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="form-table">
<tr style="display:none;" id="certificatetypetr">
<th>證書類型：</th>
<td><select name="certificatetype">
<option selected="selected" value="">請選擇</option>
<option th:each="certificateType : ${certificateType}"
th:value="${certificateType.id}" th:text="${certificateType.value}"></option>
</select></td>
</tr>
<tr>
<th><span>*</span>文件名稱：</th>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<th><span>*</span>文件照片：</th>
<td><input type="file" name="file"/></td>
</tr>
</table>
</form>
</div>
<div class="btn-box"><a onclick="filesave()">保存</a><a onclick="file_new.style.display=(file_new.style.display='none');">取消</a></div>
</div>
<!-- 預覽彈出 -->
<div class="pop-box" id="preview_box" style="display:none;">
<div class="pop-con"> <a class="close" onclick="preview_box.style.display=(preview_box.style.display='none');">×</a>
<img id="preview" style="display:none;" height="350" width="600"/>
<video id="preview_video" style="display:none;" controls="controls" height="350" width="600"></video>
</div>
</div>
<script type="text/javascript" src="/static/js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="/static/select2/js/select2.min.js" ></script>
<script th:inline="javascript">
var typevalue = "",
domid = "",
filedata = [],
filefile = [];
//獲取品種下拉框數據
function getVarietiesCode(value) {
getVarietiesCodeData(value,null);
}
//獲取品種下拉框數據
function getVarietiesCodeData(id,value) {
$.ajax({
url:"getVarietiesCodeData",
async:true,
type:"post",
data:{"id":id},
success:function(data){
if(typeof(data) == 'string'){
data = JSON.parse(data)
}
if(data.code == 0) {
var htm = "<option selected='selected' value=''>請選擇</option>";
$.each(data.data,function (index,value){
htm += "<option selected='selected' value="+value.varietiescode+
">"+value.varietiesname+"</option>"
});
$("select[name=varietiescode]").html(htm);
$("select[name=varietiescode]").val(value);
} else {
parent.layer.msg(data.msg);
}
}
});
}
//獲取農產品下拉框數據
function getBreedCode(value) {
getBreedCodeData(value,null);
}
//獲取農產品下拉框數據
function getBreedCodeData(id,value) {
$.ajax({
url:"getBreedCodeData",
async:true,
type:"post",
data:{"id":id},
success:function(data){
if(typeof(data) == 'string'){
data = JSON.parse(data)
}
if(data.code == 0) {
var htm = "<option selected='selected' value=''>請選擇</option>";
$.each(data.data,function (index,value){
htm += "<option selected='selected' value="+value.breedcode+
">"+value.breedname+"</option>"
});
$("select[name=breedcode]").html(htm);
$("select[name=breedcode]").val(value);
} else {
parent.layer.msg(data.msg);
}
}
});
}
//初始化頁面數據
$(function () {
$(".select2").select2({
language: "zh-CN",
language: {
noResults: function(params) {
return "無匹配項";
}
}
});
//下拉框回顯
var pageData = [[${pageData}]];
if(pageData.cropscode) {
getBreedCodeData(pageData.cropscode,pageData.breedcode);
}
if(pageData.breedcode) {
getVarietiesCodeData(pageData.breedcode,pageData.varietiescode);
}
var fileList = [[${fileList}]];
if(fileList) {
$.each(fileList,function (index,value){
var domid;
if(value.type == 0)
domid = "authenticationdom";
if(value.type == 1)
domid = "awardcertificatedom";
if(value.type == 2)
domid = "testreportdom";
if(value.type == 3)
domid = "imagedom";
if(value.type == 4)
domid = "videodom";
var dom = $("#"+domid);
dom.children("input").val(dom.children("input").val()+value.name+",");
dom.find("ul").append("<li><i><input type=checkbox inputdata="+
value.name+" index="+value.type+" src="+
value.imagepath+" id="+value.id+"></i>"+value.filename+"</li>");
});
}
});
//保存
function save() {
//效驗
if(!$("select[name=cropscode]").val()) {
parent.layer.msg("請選擇農產品類別");
return false;
}
if(!$("select[name=breedcode]").val()) {
parent.layer.msg("請選擇農產品");
return false;
}
if(!$("select[name=varietiescode]").val()) {
parent.layer.msg("請選擇品種");
return false;
}
if(!$("textarea[name=varietiescharacteristics]").val()) {
parent.layer.msg("請輸入產品特色");
return false;
}
var formdata = new FormData($("#formId")[0]); //用所要提交form做參數建立一個formdata對象
var filedatainfo = filedata.slice(0);
for(var i = 0; i < filedatainfo.length; i++) {
if(filedatainfo[i] == undefined) {
filedatainfo.splice(i,1);
i--;
}
}
formdata.append("filedata",JSON.stringify(filedatainfo));
$.each(filefile,function (index,value){
formdata.append("filefile",value);
});
$.ajax({
url:"saveOrUpdate",
async:true,
type:"post",
processData: false, //當設置爲true的時候,jquery ajax 提交的時候不會序列化 data，而是直接使用data
data:formdata,
contentType: false, //jax 中 contentType 設置爲 false 是爲了避免 JQuery 對其操作，從而失去分界符，而使服務器不能正常解析文件
success:function(data){
if(typeof(data) == 'string'){
data = JSON.parse(data)
}
if(data.code == 0){
parent.layer.msg(data.msg);
window.location.href='list';
}else{
parent.layer.msg(data.msg);
}
}
});
}
//刪除
function del() {
if($("input:checkbox:checked").length == 0) {
parent.layer.msg("請選擇要刪除的文件");
return false;
}
$("input:checkbox:checked").each(function (index,value){
var id = $(value).attr("value");
var inputdata = $(value).attr("inputdata");
var inputdom = $(value).parent().parent().parent().prev();
inputdom.val(inputdom.val().replace(inputdata+",",""));
//刪除元素
$(value).parent().parent().remove();
if(id) {
delete filedata[id];
delete filefile[id];
} else {
fileDel($(value).attr("id"));
}
});
}
//文件刪除
function fileDel(id) {
$.ajax({
url:"fileDel",
async:true,
type:"post",
//processData: false, //當設置爲true的時候,jquery ajax 提交的時候不會序列化 data，而是直接使用data
data:{id:id},
//contentType: false, //jax 中 contentType 設置爲 false 是爲了避免 JQuery 對其操作，從而失去分界符，而使服務器不能正常解析文件
success:function(data){
if(typeof(data) == 'string'){
data = JSON.parse(data)
}
if(data.code == 0){
parent.layer.msg(data.msg);
}else{
parent.layer.msg(data.msg);
}
}
});
}
//預覽
function preview() {
if($("input:checkbox:checked").length != 1) {
parent.layer.msg("請選擇一個文件預覽");
return false;
}
var index = $($("input:checkbox:checked")[0]).attr("value");
if(index) {
if(filedata[index].type == 4) {
$("#preview").hide();
$("#preview_video").show();
$("#preview_video").attr("src",URL.createObjectURL(filefile[index]));
} else {
$("#preview_video").hide();
$("#preview").show();
$("#preview").attr("src",URL.createObjectURL(filefile[index]));
}
} else {
var index = $($("input:checkbox:checked")[0]).attr("index");
var src = $($("input:checkbox:checked")[0]).attr("src");
if(index == 4) {
$("#preview").hide();
$("#preview_video").show();
$("#preview_video").attr("src","/file/"+src);
} else {
$("#preview_video").hide();
$("#preview").show();
$("#preview").attr("src","/file/"+src);
}
}
$("#preview_box").show();
}
//上傳文件格式效驗
$("input[name=file]").change(function () {
var img = $("input[name=file]").val();
//校驗格式
var idx = img.lastIndexOf(".");
var lastName = img.substring(idx,img.length);
var name = lastName.toLowerCase();
var size = $(this)[0].files[0].size;
if(typevalue == 4) {
if(name != ".mp4" && name != ".rmvb" && name != ".avi") {
parent.layer.msg("視頻格式不支持,請選擇mp4/rmvb/avi格式的視頻");
$("input[name=file]").val("");
return false;
}
//視頻大小限制5M
var maxSize = 1024 * 1024 * 5;
if(size > maxSize){
parent.layer.msg("上傳失敗,請選擇5MB以內的視頻上傳");
$("input[name=file]").val("");
return false;
}
} else {
if(name != ".jpg" && name != ".jpeg" && name != ".png") {
parent.layer.msg("圖片格式不支持,請選擇jpg/jpeg/png格式的圖片");
$("input[name=file]").val("");
return false;
}
//圖片大小限制1M
var maxSize = 1024 * 1024;
if(size > maxSize){
parent.layer.msg("上傳失敗,請選擇1MB以內的圖片上傳");
$("input[name=file]").val("");
return false;
}
}
});
//上傳文件彈出層
function uploaddom(type,sel) {
//視頻效驗 只允許上傳一個視頻
if(type == 4) {
if($(sel).parent().prev().find("li").length > 0) {
parent.layer.msg("僅允許上傳一個視頻");
return false;
}
}
domid = $(sel).parent().parent().attr("id");
typevalue = type;
$("#file_new_form")[0].reset();
if(type == 0) {
$("#certificatetypetr").show();
} else {
$("#certificatetypetr").hide();
}
$("#file_new").show();
}
//彈出層保存
function filesave() {
if(!$("input[name=name]").val()) {
parent.layer.msg("請填寫文件名稱");
return false;
}
if(!$("input[name=file]").val()) {
parent.layer.msg("請選擇照片文件");
return false;
}
//組裝數據
filedata.push({
name:$("input[name=name]").val(),
type:typevalue,
certificatetype:$("select[name=certificatetype]").val()
});
filefile.push($("input[name=file]")[0].files[0]);
var dom = $("#"+domid);
dom.children("input").val(dom.children("input").val()+$("input[name=name]").val()+",");
dom.find("ul").append("<li><i><input type=checkbox value="+(filedata.length-1)+" inputdata="+$("input[name=name]").val()+"></i>"+$("input[name=file]")[0].files[0].name+"</li>");
$("#file_new").hide();
}
//控制是否顯示上傳按鈕
function choose(sel){
var seldom = $(sel);
var domid = seldom.next().attr("id");
if(seldom.val() == "1") {
$("#"+domid).show();
} else {
$("#"+domid).hide();
}
//如果有上傳文件清空
$("#"+domid).find("ul").find("input").each(function (index,value){
var id = $(value).attr("value");
if(id) {
delete filedata[id];
delete filefile[id];
} else {
fileDel($(value).attr("id"));
}
});
//最後清除元素內容
$("#"+domid).find("input").val("");
$("#"+domid).find("ul").html("");
};
</script>
</body>
</html>