js上传文件并且附带自定义信息

最新推荐文章于 2024-04-24 01:09:50 发布
Living_Z
最新推荐文章于 2024-04-24 01:09:50 发布
阅读量991
点赞数
分类专栏：前端文章标签：文件上传前端
本文链接：https://blog.csdn.net/qq_26814945/article/details/100070844
版权
前端专栏收录该内容
9 篇文章 0 订阅
订阅专栏
实现的思路用了一个保存信息的数组和一个图片的数组保持住两者的顺序一一对应最后提交到后台下面贴出相关代码供有需要的同学参考
页面：
在这里插入图片描述
代码：
<!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>
Living_Z
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js上传文件并且附带自定义信息

实现的思路用了一个保存信息的数组和一个图片的数组保持住两者的顺序一一对应最后提交到后台下面贴出相关代码供有需要的同学参考页面：代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt...
复制链接

扫一扫