js 讀取 input file 的內容

豬豬是天才發表於2018-07-24

背景:使用input file 上傳了 csv 檔案,怎樣在前端顯示出裡邊的內容呢?

解決如下:

test () {
      var data = []
			var files = this.$refs.fileMatrix.files
			var regp = new RegExp(".*,\".*,.*\"$")
			if(files.length) {
				var file = files[0]

				var reader = new FileReader() //new一個FileReader例項
				if(typeof FileReader == 'undefined') {
					alert("你的瀏覽器暫不支援該功能")
					return
				}
				reader.readAsText(file)
				reader.onload = function(f) {
                                        console.log(this.result);
					//顯示檔案
					var relArr = this.result.split("\r\n")
					if(!$.isEmptyObject(relArr) && relArr.length > 1) {
						for(var key = 1, len = relArr.length; key < len; key++) {
							var values = relArr[key]
							if(regp.test(values)) {
								console.log("檔案內容中有英文逗號,麻煩修改後再上傳,含有英文逗號的內容是:" + values)
								return
							}
						}
					}
				}
      }
    },複製程式碼

可以通過列印 reader.onload 方法裡的 this.result 就可以在前端show csv 裡的內容了~

結果如下:

js 讀取 input file 的內容


相關文章