Browse Source

改为bootstrap-file-input样式

zhuwei 5 years ago
parent
commit
cab8594df8
5 changed files with 31 additions and 8 deletions
  1. 4 0
      css/excel-preview.css
  2. 10 3
      index.html
  3. 0 0
      js/dist/excel-preview.min.js
  4. 15 4
      js/src/excel-preview.js
  5. 2 1
      package.json

+ 4 - 0
css/excel-preview.css

@@ -33,4 +33,8 @@
 		}
 		.tab-pane{
 			padding: 20px;
+		}
+		.file-error-message{
+			position: absolute;
+    		top: 61px;
 		}

+ 10 - 3
index.html

@@ -6,6 +6,7 @@
 	<title>Excel Preview</title>
 	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
 	<link rel="stylesheet" href="node_modules/bootstrap-table/dist/bootstrap-table.min.css">
+	<link href="node_modules/bootstrap-fileinput/css/fileinput.min.css"  rel="stylesheet" type="text/css" />
 	<link rel="stylesheet" href="css/excel-preview.css">
 </head>
 <body>
@@ -13,8 +14,9 @@
 	<div class="container">
 		<section>
 			<div class="content">
-				<input type="file" name="file" id="file">
+				<input type="file" name="file" id="file" class="file">
 				<div id="excelTable"></div>
+				<div id="kartik-file-errors"></div>
 			</div>			
 		</section> 
 	</div>
@@ -24,9 +26,14 @@
 	<script src="node_modules/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript"></script>
 	<script src="node_modules/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
 	<script src="node_modules/xlsx-style/dist/xlsx.full.min.js" type="text/javascript"></script>
-	<script src="js/dist/excel-preview.min.js"></script>
+	<script src="node_modules/bootstrap-fileinput/js/fileinput.min.js" type="text/javascript"></script>
+	<script src="node_modules/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
+
+	<!-- <script src="js/dist/excel-preview.min.js"></script> -->
+	<script src="js/src/util.js" type="text/javascript" ></script>
+	<script src="js/src/excel-preview.js" type="text/javascript" ></script>
 	<script type="text/javascript">
-	 	$("#excelTable").excelPreview({});
+	 	$("#excelTable").excelPreview();
 	</script>
 </body>
 </html>

File diff suppressed because it is too large
+ 0 - 0
js/dist/excel-preview.min.js


+ 15 - 4
js/src/excel-preview.js

@@ -3,7 +3,7 @@
     var pluginName = "excelPreview",
 
     defaults = {
-        // name: "excelPreview"
+        height: 500
     };
 
     // The actual plugin constructor
@@ -17,27 +17,38 @@
             this.settings = $.extend( {}, defaults, options );
             this._defaults = defaults;
             this._name = pluginName;
+            defaults = this.settings;
             this.init();
     }
 
     Plugin.prototype = {
         init: function () {
             var e = this;
-            $(e.element).prev('input[type=file]').on('change', function(file) {
+            $(e.element).prev('input[type=file]').fileinput({
+                language: 'zh',
+                showUpload: false,
+                dropZoneEnabled: false,
+                hideThumbnailContent: true,
+                showPreview: false,
+                allowedFileExtensions: ['xlsx'],
+                elErrorContainer: '#kartik-file-errors',
+                // showRemove: false
+            }).on('change', function(file) {
                 e.excelPreview(file);
-                $(this).val('');
             })  
         },
 
         excelPreview: function (file) {
             var e = this;
             loadFile(file, e.element);
+            $(e.element).prev('input[type=file]').fileinput('refresh');
             return true;
         }
     };
 
     function loadFile(event, ele) {
         let file = event.target.files;
+        if(file.length == 0)return;
         var fileReader = new FileReader();
         fileReader.onload = (ev) => {
             try {
@@ -186,7 +197,7 @@
     function loadTabContent(sheetName, workbook, $table) {
         var worksheet = workbook.Sheets[sheetName];
         var tableConf = {
-            height: 600,
+            height: defaults.height,
             showHeader: false
         };
         var tableData = getTableData(worksheet);

+ 2 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "excel-preview",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Preview Excel online",
   "main": "index.js",
   "scripts": {
@@ -23,6 +23,7 @@
   "homepage": "https://github.com/sumile-ting/excelPreview#readme",
   "dependencies": {
     "bootstrap": "^3.4.1",
+    "bootstrap-fileinput": "^5.0.6",
     "bootstrap-table": "^1.13.1",
     "jquery": "^3.4.0",
     "xlsx": "^0.14.1",

Some files were not shown because too many files changed in this diff