form表单的input上传文件

在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码。行吧,既然用到了那就硬着头皮上咯。

使用

首先文件的上传需要一个type=file的input。它的意义就是上传文件,图片,音频,视频都可以用 它来上传。具体来说说它是怎么用的吧:

首先肯定是先放入这个input:
input
我只是写了这个,其他什么都没有加,这个时候运行起来就看到页面上已经有了这个:
input
这个按钮就是这个属性自带的,点击即可上传需要的文件,后面的文字会在上传后变为你上传的文件信息,这就是简单的使用了。

input限制上传文件

在想上传文件的时候,有时候需要限制上传的文件类型。type=file的input里面还有一个accept属性,可以用它来限制文件的上传,只需要在这个属性的后面跟上需要上传的类型即可,如图
在这里插入图片描述
这些文件的格式都可以在mime表上查找到,找到需要的就写上去就行了
mime表

这种限制方式是在根源上限制住了,点击上传就不会显示限制之外的文件。

除了这种方式之外,使用js验证上传文件的后缀名也是常用的一个方法,type=file的input里面的value值就是上传的文件的信息,可以通过正则来验证该信息。下面是我验证指定视频文件的函数,可以参照一下:

//将需要验证的视频后缀名封装为一个数组,方便调用
var video_ext=['rmvb','3gp','avi','mp4','wmv','mov','flx'];
//封装一个验证视频课时的函数
function check_video(value) {
    let video_flag=false;
    let index=value.lastIndexOf('.');
    //取.后面的字符,与数组中的一一比较
    let ext=value.substr(index+1);
    for(let i=0;i<video_ext.length;i++){
        if(ext == video_ext[i])
        {
            video_flag = true; //一旦找到合适的,立即退出循环
            break;
        }
    }
    if(video_flag)
    {
       return true;
    }else
    {
        return false;
    }
}
在Web开发中,form表单的文件上传功能允许用户选择本地文件并将其上传到服务器。实现这一功能通常涉及以下HTML和后端技术的配合: 1. HTML表单设置: - 使用`<form>`标签,并设置`enctype`属性为`multipart/form-data`。这是因为`multipart/form-data`能够处理文件数据这种二进制格式。 - 在`<form>`中加入`<input type="file">`标签,让用户可以选择文件。为了提高用户体验,可以设置`accept`属性来限制用户可以选择的文件类型。 - 提供一个提交按钮,用户点击后会触发表单的提交。 示例代码: ```html <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file" accept=".jpg,.png,.gif" /> <input type="submit" value="上传文件" /> </form> ``` 2. 后端处理: - 服务器端接收文件数据时,需要根据设置的`enctype`来解析POST请求。 - 根据具体的编程语言和框架,后端可能需要使用特定的库或组件来处理文件上传。 - 在接收到文件数据后,后端通常会进行文件保存操作,并可能会执行一些额外的处理,比如验证文件类型、大小,以及为上传的文件生成安全的文件名等。 例如,在Python的Flask框架中,可以使用`request.files`来接收上传的文件: ```python from flask import request @app.route('/upload', methods=['POST']) def upload_file(): file = request.files['file'] if file: filename = secure_filename(file.filename) file.save(os.path.join('/path/to/the/uploads', filename)) return '文件上传成功' ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值