由SpringMVC实现文件上传，前端基于easyui

最新推荐文章于 2024-04-17 10:24:02 发布

_陌子曦

最新推荐文章于 2024-04-17 10:24:02 发布

阅读量9.7k

点赞数 2

分类专栏：文件上传文章标签： easyui

本文链接：https://blog.csdn.net/qciwyy/article/details/54316559

版权

文件上传专栏收录该内容

4 篇文章 0 订阅

订阅专栏

后台控制层的方法参考博客：http://blog.csdn.net/qciwyy/article/details/54017166

本博客主要讲解前台方法（基于easyui的easyui-filebox控件）

一 .easyui-1.4.0前版本使用方法，在这之前easyui没有easyui-filebox控件,使用的是type="file"的方式实现文件上传

注意form设置，必须使用form-data传递文件

前端代码写法如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="${ctx }/static/js/jquery-easyui-1.3.4/demo/demo.css" />

<script type="text/javascript" src="jquery-easyui-1.3.4/locale/easyui-lang-en.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/ajaxfileupload.js"></script>
</head>
<body>
    <form id="importFileForm" method="post" enctype="multipart/form-data">
        <table style="margin:5px;height:70px;">
            <tr>
                <td><input type="file" class="easyui-filebox" id="file" name="file" style="width:260px;"></td>
            </tr>
            <tr>
                <td><label id="fileName"></label></td>
            </tr>
            <tr>
                <td>
                    <label id="uploadInfo"></label>
                </td>
            </tr>
        </table>
        <div style="text-align:center;clear:both;margin:5px;">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" οnclick="importFileClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.upload"/></a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" οnclick="closeImportClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.qk"/></a>
        </div>
    </form>
  
  <script type="text/javascript">
//关闭导入弹出窗口
  this.closeImportClick = function () {
      document.getElementById('file').value = null;
      document.getElementById('fileName').innerHTML = "";
      document.getElementById('uploadInfo').innerHTML = "";
      $('#import-excel-template').window('close')
  }
  
  //导入文件
   function importFileClick()
  {
      //获取上传文件控件内容
      var file = document.getElementById('file').files[0];
      //判断控件中是否存在文件内容，如果不存在，弹出提示信息，阻止进一步操作
     if (file == null) { alert('错误，请选择文件'); return; }
      //获取文件名称
      var fileName = file.name;
      //获取文件类型名称
      var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
      //这里限定上传文件文件类型必须为.xlsx，如果文件类型不符，提示错误信息
      if (file_typename == '.xml')
      {
          //计算文件大小
          var fileSize = 0;
          //如果文件大小大于1024字节X1024字节，则显示文件大小单位为MB，否则为KB
          if (file.size > 1024 * 1024) {
　　　　　　　　fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;

　　　　　　　if (fileSize > 10) {
                   alert('错误，文件超过10MB，禁止上传！'); return;
              }
　　　　　　　fileSize = fileSize.toString() + 'MB';
          }
          else {
              fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
          }
          //将文件名和文件大小显示在前端label文本中
          document.getElementById('fileName').innerHTML = "<span style='color:Blue'>文件名: " + file.name + ',大小: ' + fileSize + "</span>";
          //获取form数据
          var formData = new FormData($("#importFileForm")[0]);
          //调用apicontroller后台action方法，将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
          $.ajax({
              url:'${ctx}/dataEntryXML/getGafXmlData',
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
              success: function (returnInfo) {
                  //上传成功后将控件内容清空，并显示上传成功信息
                  document.getElementById('file').value = null;
                  document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
              },
              error: function (returnInfo) {
                  //上传失败时显示上传失败信息
                  document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
              }
          });
      }
      else {
          alert("文件类型错误");
            //将错误信息显示在前端label文本中
            document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xlsx后缀而不应该是" + file_typename + ",请重新选择文件</span>"
      }
  }
  </script>
</body>
</html>

二.easyui-1.4.0之后的版本可以使用easyui的easyui-filebox控件实现文件上传。前端代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.0/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.0/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="${ctx }/static/js/jquery-easyui-1.4.0/demo/demo.css" />

<script type="text/javascript" src="jquery-easyui-1.4.0/locale/easyui-lang-en.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.0/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.0/ajaxfileupload.js"></script>
</head>
<body>
    <form id="importFileForm" method="post" enctype="multipart/form-data">
        <table style="margin-left:30px;margin-top:15px;height:70px;">
            <tr>
                <td><spring:message code="gafdataentrytxt.fileformat"/>:</td>
                <td></td>
                <td>XML,TXT</td>
            </tr>
            <tr>
                <td><spring:message code="gafdataentrytxt.pleaseselectfile"/>:</td>
                <td></td>
                <td><input class="easyui-filebox" id="fileImport" name="fileImport" data-options="prompt:'Choose a file...'" style="width:250px;height:25px;"></td>
            </tr>
            <tr>
                <td>      </td>
                <td colspan="2"><label id="fileName"></label></td>
            </tr>
            <tr>
                <td>      </td>
                <td colspan="2">
                    <label id="uploadInfo"></label>
                </td>
            </tr>
        </table>
        <%-- <div style="text-align:center;clear:both;margin:5px;">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" οnclick="importFileClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.upload"/></a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" οnclick="closeImportClick()" href="javascript:void(0)"><spring:message code="gafdataentrytxt.qk"/></a>
        </div> --%>
    </form>
  <script type="text/javascript">
//关闭导入弹出窗口
  function closeImportClick(){
	  $('#fileImport').filebox('setValue','');
      document.getElementById('fileImport').value = null;
      document.getElementById('fileName').innerHTML = "";
      document.getElementById('uploadInfo').innerHTML = "";
      $('#dd').dialog('close');
  }
  
  //导入文件
   function importFileClick()
  {   
      //获取上传文件控件内容。根据实际情况需要file对象的获取方式有如下两种方法，filebox_file_id_这个是easyui自己封装的文件上传id，可以在
	  jquery.easyui.min.js这个js文件中搜到.所以你在input里面写的id=“aa”是没有实际意义的，故用如下两种方式获取。
      var file = $('input[name="fileImport"][type="file"]').prop('files')[0];
	  /*var file = document.getElementById('filebox_file_id_1').files[0];*/
      //判断控件中是否存在文件内容，如果不存在，弹出提示信息，阻止进一步操作
     if (file == null) { alert('错误，请选择文件'); return; }
      //获取文件名称
      var fileName = file.name;
      //获取文件类型名称
      var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
      //这里限定上传文件文件类型必须为.xlsx，如果文件类型不符，提示错误信息
      if (file_typename == '.xml')
      {
          //计算文件大小
          var fileSize = 0;
          //如果文件大小大于1024字节X1024字节，则显示文件大小单位为MB，否则为KB
          if (file.size > 1024 * 1024) {
　　　　　　　　fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;

　　　　　　　if (fileSize > 10) {
                   alert('错误，文件超过10MB，禁止上传！'); return;
              }
　　　　　　　fileSize = fileSize.toString() + 'MB';
          }
          else {
              fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
          }
          //将文件名和文件大小显示在前端label文本中
          document.getElementById('fileName').innerHTML = "<span style='color:Blue'>文件名: " + file.name + ',大小: ' + fileSize + "</span>";
          //获取form数据
          var formData = new FormData($("#importFileForm")[0]);
          //调用apicontroller后台action方法，将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
          $.ajax({
              url:'${ctx}/dataEntryXML/getGafXmlData',
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
              success: function (returnInfo) {
                  //上传成功后将控件内容清空，并显示上传成功信息
                  document.getElementById('file').value = null;
                  document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
              },
              error: function (returnInfo) {
                  //上传失败时显示上传失败信息
                  document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
              }
          });
      }
      else {
          alert("文件类型错误");
            //将错误信息显示在前端label文本中
            document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xlsx后缀而不应该是" + file_typename + ",请重新选择文件</span>"
      }
  }
  </script>
</body>
</html>

效果图

_陌子曦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
由SpringMVC实现文件上传，前端基于easyui

后台控制层的方法参考博客：http://blog.csdn.net/qciwyy/article/details/54017166本博客主要讲解前台方法（基于easyui的easyui-filebox控件）一 .easyui-1.4.0前版本使用方法，在这之前easyui没有easyui-filebox控件,使用的是type="file"的方式实现文件上传注意form设置，必须使用fo
复制链接

扫一扫