整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

js 遍历html表格 获取表格内容

php js jquery功能片段#

唯一需求:表格id。

注意:因提交数据不能包含\n,所以要替换。呈现时可以替换回换行符。

<script type="text/javascript">

/**

* 遍历表格内容后返回数组

* @param string id 表格id

* @return Array 或者JSON

*/

function getTableContent(id) {

var mytable = document.getElementById(id);

var data = [];

var tmpTxt;

for(var i = 0, rows = mytable.rows.length; i < rows; i++) {

for(var j = 0, cells = mytable.rows[i].cells.length; j < cells; j++) {

if(!data[i]) {

data[i] = new Array();

}

tmpTxt = mytable.rows[i].cells[j].innerHTML;

//tmpTxt = tmpTxt.replace(/<[^>]+>/gi,'');//过滤全部的html标签,不包括内容

//tmpTxt =tmpTxt.replace(/\s/gi,'');

tmpTxt =tmpTxt.replace(/\n/gi,'<br>');

//data[i][j] = tmpTxt;

data[i][j] = tmpTxt.replace(/ /g, ""); //替换全角空格

}

}

//var JSONdata=data;

var JSONdata = JSON.stringify(data); //序列化数组JSON.stringify(data) 反序列化数组JSON.parse(data)

return JSONdata;

//return data;//返回数组

}

</script>

于安全和隐私的原因,web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现。在这篇文章中,我们将通过一些例子来看看它是如何工作的。

文件操作的流程

获取文件

由于浏览器中的 JS 无法从用户的设备访问本地文件,我们需要为用户提供一种方法来选择一个或多个文件供我们使用。这可以通过文件选择器<input type='fule' />来完成。

<input type="file" id="fileInput">

如果想允选择多个文件,可以添加multiple属性:

<input type="file" id="fileInput" multiple>

我们可以通过change事件来监听文件的选择,也可以添加另一个 UI 元素让用户显式地开始对所选文件的处理。

input file 具有一个files属性,该属性是File对象的列表(可能有多个选择的文件)。

File对象如下所示:

读取文件

读取文件,主要使用的是[FileReader][1]类。

「该对象拥有的属性:」

「FileReader.error」 :只读,一个DOMException,表示在读取文件时发生的错误 。

「FileReader.readyState」:只读 表示 FileReader 状态的数字。取值如下:

常量名值描述EMPTY0还没有加载任何数据LOADING1数据正在被加载DONE2已完成全部的读取请求

「FileReader.result」:只读,文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

「该对象拥有的方法:」

readAsText(file, encoding):以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。

readAsDataUrl(file):读取文件并且将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file):读取文件并且把文件以字符串保存在result属性中。

readAsArrayBuffer(file):读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。

FileReader.abort():中止读取操作。在返回时,readyState属性为DONE。

「文件读取的过程是异步操作,在这个过程中提供了三个事件:progress、error、load事件。」

progress:每隔50ms左右,会触发一次progress事件。

error:在无法读取到文件信息的条件下触发。

load:在成功加载后就会触发。

在下面的示例中,我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。

例一:读取文本文件

为了将文件内容显示为文本,change需要重写一下:

首先,我们要确保有一个可以读取的文件。如果用户取消或以其他方式关闭文件选择对话框而不选择文件,我们就没有什么要读取和退出函数。

然后我们继续创建一个FileReader。reader的工作是异步的,以避免阻塞主线程和 UI 更新,这在读取大文件(如视频)时非常重要。

reader发出一个'load'事件(例如,类似于Image对象),告诉我们的文件已经读取完毕。

reader将文件内容保存在其result属性中。此属性中的数据取决于我们使用的读取文件的方法。在我们的示例中,我们使用readAsText方法读取文件,因此result将是一个文本字符串。

例二:显示本地选择的图片

如果我们想要显示图像,将文件读取为字符串并不是很有用。FileReader有一个readAsDataURL方法,可以将文件读入一个编码的字符串,该字符串可以用作<img>元素的源。本例的代码与前面的代码基本相同,区别是我们使用readAsDataURL读取文件并将结果显示为图像:

总结

1)由于安全和隐私的原因,JavaScript 不能直接访问本地文件。

2)可以通过 input 类型为 file 来选择文件,并对文件进行处理。

3) file input 具有带有所选文件的files属性。

4) 我们可以使用FileReader来访问所选文件的内容。


作者: Martin Splitt 译者:前端小智 来源:dev

原文:https://dev.to/g33konaut/reading-local-files-with-javascript-25hn



在前面

今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受。这么好的光阴怎么浪费,睡觉、吃饭、打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完。

这篇文章比较基础,在国庆期间的业余时间写的,这几天又完善了下,力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点,break or continue ?

  • 文件上传原理
  • 最原始的文件上传
  • 使用 koa2 作为服务端写一个文件上传接口
  • 单文件上传和上传进度
  • 多文件上传和上传进度
  • 拖拽上传
  • 剪贴板上传
  • 大文件上传之分片上传
  • 大文件上传之断点续传
  • node 端文件上传

原理概述

原理很简单,就是根据 http 协议的规范和定义,完成请求消息体的封装和消息体的解析,然后将二进制内容保存到文件。

我们都知道如果要上传一个文件,需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢?

multipart互联网上的混合资源,就是资源由多种元素组成,form-data表示可以使用HTML Forms 和 POST 方法上传文件,具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体



  • 请求头:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件,其中boundary表示分隔符,如果要上传多个表单项,就要使用boundary分割,每个表单项由———XXX开始,以———XXX结尾。

  • 消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值,表示一个表单元素,name 表示表单元素的 名称,回车换行后面就是name的值,如果是上传文件就是文件的二进制内容。

Content-Type:表示当前的内容的 MIME 类型,是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后,服务器会收到请求的消息体,然后对消息体进行解析,解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容,不过这样是行不通的,二进制buffer转化为string,对字符串进行截取后,其索引和字符串是不一致的,所以结果就不会正确,除非上传的就是字符串。

不过一般情况下不需要自行解析,目前已经有很成熟的三方库可以使用。

至于如何解析,这个也会占用很大篇幅,后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代,如果实现一个无刷新的文件上传那可是费老劲了,大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定,在那个时代 ie 就是最好用的浏览器(别无选择)。

DEMO



这种方式上传文件,不需要 js ,而且没有兼容问题,所有浏览器都支持,就是体验很差,导致页面刷新,页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性,否则数据无法发送<br/>
<br/>
            标题:<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中,文件上传本身和业务无关,代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下,也可以指定保存的文件路径。



然后在后续中间件内得到已保存的文件的信息,再做二次处理。

  • ctx.request.files.f1 得到文件信息,f1为input file 标签的 name
  • 获得文件的扩展名,重命名文件

NODE

/**
 * 服务入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录,不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传,默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理,修改名称
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件对象
    var path = file.path;
    var fname = file.name;//原文件名称
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/