整合营销服务商

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

免费咨询热线:

input标签的 maxlength 属性(HTML限制最大输入字数)

下面这个 HTML 表单带有最大长度分别是 85 和 55 个字符的两个输入字段:

<form action="ybb.php" method="get">
  <p>Name: <input type="text" name="fullname" maxlength="85" /></p>
  <p>Email: <input type="text" name="email" maxlength="55" /></p>
  <input type="submit" value="Submit" />
</form>

亲自试一试

定义和用法

maxlength 属性规定输入字段的最大长度,以字符个数计。

maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

语法

<input maxlength="value">

属性值

值描述characters输入字段中允许的最大字符数。

另外还有



在前面

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

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

自测读不读

以下是本文所涉及到的知识点,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/

、HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UploadFile</title>
</head>
<body>
<form method="post" action="http://localhost:8083/upload" enctype="multipart/form-data">
   <input type="file" name="file">
   <br><br>
   <input type="submit" value="提交">
</form>
</body>
</html>

二、Service

package com.gl.service;

import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.UUID;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import net.sf.json.JSONObject;

@Service
public class UploadService {
public JSONObject fileUpload(MultipartFile file) throws Exception {
JSONObject result = new JSONObject();
if (file == null || file.isEmpty()) {
result.put("msg", "未选择需上传的文件");
return result;
}
// 取得绝对路径
String filePath = new File("uploadFiles").getAbsolutePath();
// 取得相对路径
String pathString = new File("uploadFiles").getPath();
File fileUpload = new File(filePath);
if (!fileUpload.exists()) {
fileUpload.mkdirs();
}

// 获取原文件名
fileUpload = new File(filePath, file.getOriginalFilename());
if (fileUpload.exists()) {
result.put("msg", "上传的文件已存在");
return result;
}

try {
String ext = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
String newFileName = UUID.randomUUID().toString() + ext;
file.transferTo(new File(filePath, newFileName));
// 输出相对路径和新文件名,测试用
System.out.println(pathString + newFileName);
result.put("success", true);
return result;
} catch (IOException e) {
result.put("failed", false);
result.put("msg", "上传日志文件到服务器失败:" + e.toString());
return result;
}
}

/*
 * 下载服务 File file=new File(); 这句是新建一个文件。file.separator这个代表系统目录中的间隔符,
 * 说白了就是斜线,不过有时候需要双线,有时候是单线, 你用这个静态变量就解决兼容问题了。
 */
public void fileDownload(String name, HttpServletResponse response) throws Exception {
File file = new File("uploadFiles" + File.separator + name);
JSONObject result = new JSONObject();
if (!file.exists()) {
result.put("msg", name + "文件不存在存在");
}
response.setContentType("application/force-download");
response.addHeader("Content-Disposition", "attachment;fileName=" + name);

byte[] buffer = new byte[1024];
try (FileInputStream fis = new FileInputStream(file); BufferedInputStream bis = new BufferedInputStream(fis)) {

OutputStream os = response.getOutputStream();

int i = bis.read(buffer);
while (i != -1) {
os.write(buffer, 0, i);
i = bis.read(buffer);
}
}
}

}

三、Controller

package com.gl.controller;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.gl.service.UploadService;

import net.sf.json.JSONObject;

@Controller
public class UploadController {

@Resource
UploadService uploadService;

@ResponseBody
@PostMapping("/upload")
public JSONObject logUpload(@RequestParam("file") MultipartFile file) throws Exception {
return uploadService.fileUpload(file);
}

/*
 * 下载文件
 */
@GetMapping(value = "/download/{name}")
public void logDownload(@PathVariable String name, HttpServletResponse response) throws Exception {
uploadService.fileDownload(name, response);
}
}

四、application.properties限制文件大小