10个对web开发人员有用的HTML文件上传技巧

本文已经过原作者 Tapas Adhikary 授权翻译

简介

上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论 HTML文件上传支持的10种用法，希望对你有用。

1. 单文件上传

我们可以将input 类型指定为file，以在Web应用程序中使用文件上传功能。

<input type="file" id="file-uploader">

input filte 提供按钮上传一个或多个文件。默认情况下，它使用操作系统的本机文件浏览器上传单个文件。成功上传后，File API 使得可以使用简单的 JS 代码读取File对象。要读取File对象，我们需要监听 change事件。

首先，通过id获取文件上传的实例:

const fileUploader = document.getElementById('file-uploader');

然后添加一个change 事件侦听器，以在上传完成后读取文件对象，我们从event.target.files属性获取上传的文件信息：

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

在控制台中观察输出结果，这里关注一下FileList数组和File对象，该对象具有有关上传文件的所有元数据信息。

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm

2. 多文件上传

如果我们想上传多个文件，需要在标签上添加 multiple 属性：

<input type="file" id="file-uploader" multiple />

现在，我们可以上传多个文件了，以前面事例为基础，选择多个文件上传后，观察一下控制台的变化：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/MWeamYp

3.了解文件元数据

每当我们上传文件时，File对象都有元数据信息，例如file name，size，last update time，type 等等。这些信息对于进一步的验证和特殊处理很有用。

const fileUploader = document.getElementById('file-uploader');

// 听更 change 件并读取元数据
fileUploader.addEventListener('change', (event) => {
  // 获取文件列表数组
  const files = event.target.files;

  // 遍历并获取元数据
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});

下面是单个文件上传的输出结果：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv

4.了解 accept 属性

我们可以使用accept属性来限制要上载的文件的类型，如果只想上传的文件格式是 .jpg，.png 时，可以这么做：

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

在上面的代码中，只能选择后缀是.jpg和.png的文件。

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP

5. 管理文件内容

成功上传文件后显示文件内容，站在用户的角度上，如果上传之后，没有一个预览的，就很奇怪也不体贴。

我们可以使用FileReader对象将文件转换为二进制字符串。然后添加load 事件侦听器，以在成功上传文件时获取二进制字符串。

// FileReader 实例
const reader = new FileReader();

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];

  reader.readAsDataURL(file);

  reader.addEventListener('load', (event) => {
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ

6.验证文件大小

如果用户上传图片过大，为了不让服务器有压力，我们需要限制图片的大小，下面是允许用户上传小于 1M 的图片，如果大于 1M 将上传失败。

fileUploader.addEventListener('change', (event) => {
  // Read the file size
  const file = event.target.files[0];
  const size = file.size;

  let msg = '';

 // 检查文件大小是否大于1MB
  if (size > 1024 * 1024) {
      msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
  } else {
      msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
  }
  feedback.innerHTML = msg;
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv

7. 显示文件上传进度

更好的用户体验是让用户知道文件上传进度，前面我们用过了FileReader以及读取和加载文件的事件。

const reader = new FileReader();

FileReader还有一个progress 事件，表示当前上传进度，配合HTML5的progress标签，我们来模拟一下文件的上传进度。

reader.addEventListener('progress', (event) => {
  if (event.loaded && event.total) {
    // 计算完成百分比
    const percent = (event.loaded / event.total) * 100;
    // 将值绑定到 `progress`标签
    progress.value = percent;
  }
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj

8. 怎么上传目录上传?

我们可以上传整个目录吗?嗯，这是可能的，但有一些限制。有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传)，它允许我们上传整个目录。

目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。

<input type="file" id="file-uploader" webkitdirectory />

用户必须需要确认才能上传目录

用户单击“上传”按钮后，就会进行上传。这里要注意的重要一点。FileList数组将以平面结构的形式包含有关上载目录中所有文件的信息。对于每个File对象，webkitRelativePath属性表示目录路径。

例如，上传一个主目录及其下的其他文件夹和文件：

现在，File 对象将将webkitRelativePath填充为：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp

9. 拖拽上传

不支持文件上传的拖拽就有点 low 了，不是吗?我们来看看如何通过几个简单的步骤实现这一点。

首先，创建一个拖放区域和一个可选的区域来显示上传的文件内容。

<div id="container">
  <h1>Drag & Drop an Image</h1>
  <div id="drop-zone">
    DROP HERE
  </div>

  <div id="content">
    Your image to appear here..
  </div>

</div>

通过它们各自的ID获取dropzone和content 区域。

 const dropZone = document.getElementById('drop-zone');
 const content = document.getElementById('content');

添加一个dragover 事件处理程序，以显示将要复制的内容的效果:

dropZone.addEventListener('dragover', event => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

接下来，我们需要一个drop事件监听器来处理。

dropZone.addEventListener('drop', event => {
  // Get the files
  const files = event.dataTransfer.files;


});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN

10. 使用objectURL处理文件

有一个特殊的方法叫做URL.createobjecturl()，用于从文件中创建唯一的URL。还可以使用URL.revokeObjectURL()方法来释放它。

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。


fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  
  const img = document.createElement('img');
  imageGrid.appendChild(img);
  img.src = URL.createObjectURL(file);
  img.alt = file.name;
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN

总结

无论何时，如果你还想学习本文涉及的一些知识，你可以在这里尝试。

https://html-file-upload.netlify.app/

一步，先写html或jsp页面，写一个form，enctype设置为multipart/form-data，写两个input，一个type为file，一个type为submit，type的值可以用双引号，也可不用。详细代码如下：<form action="uploadServlet" enctype="multipart/form-data">

</form>

第二步，在web.xml中设置servlet和servlet mapping，并在servlet中设置multipart-config，设置允许上传文件的最大长度，注意单位为字节，样例中约为10M和20M。

第三步，在servlet中处理文件上传，使用 request.getPart("file")方法获取part，再通过part.getSubmittedFileName获取上传文件名，使用part.write方法写文件到服务中，注意路径问题，可以直接使用绝对路径。

对于linux中使用tomcat，可能还需要配置tomcat的servlet.xml中的UMASK="0022"，修改前为0027。

以上便是我分享的内容，感谢您的阅读，非常欢迎并期待您在评论区留下宝贵的意见和建议。如果你在处理数据时遇到了类似的问题，欢迎随时私信我，我将竭诚为你提供帮助。同时，如果你对数据处理领域充满热情，也欢迎你与我私信交流，期待与你共同探讨、学习和进步，期待与您的每一次交流。

件上传是网站开发中非常常见的功能。这里详细讲述如何在 Django 中实现文件的上传功能。

前端HTML代码实现：

在前端中，我们需要填入一个 form 标签，然后在这个 form 标签中指定 enctype="multipart/form-data"，不然就不能上传文件。
在 form 标签中添加一个 input 标签，然后指定 input 标签的 name，以及 type="file"。

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile">
</form>

后端的代码实现：

后端的主要工作是接收文件，然后存储文件。接收文件的方式跟接收 POST 的方式是一样的，只不过是通过 FILES 来实现。示例代码如下：

def save_file(file):
    with open('somefile.txt','wb') as fp:
        for chunk in file.chunks():
            fp.write(chunk)

def index(request):
    if request.method=='GET':
        form=MyForm()
        return render(request,'index.html',{'form':form})
    else:
        myfile=request.FILES.get('myfile')
        save_file(myfile)
        return HttpResponse('success')

以上代码通过 request.FILES 接收到文件后，再写入到指定的地方。这样就可以完成一个文件的上传功能了。

使用模型来处理上传的文件

在定义模型的时候，我们可以给存储文件的字段指定为 FileField，这个 Field 可以传递一个 upload_to参数，用来指定上传上来的文件保存到哪里。比如我们让他保存到项目的 files 文件夹下，那么示例代码如下：

# models.py
class Article(models.Model):
    title=models.CharField(max_length=100)
    content=models.TextField()
    thumbnail=models.FileField(upload_to="files")


# views.py
def index(request):
    if request.method=='GET':
        return render(request,'index.html')
    else:
        title=request.POST.get('title')
        content=request.POST.get('content')
        thumbnail=request.FILES.get('thumbnail')
        article=Article(title=title, content=content, thumbnail=thumbnail)
        article.save()
        return HttpResponse('success')

调用完 article.save() 方法，就会把文件保存到files下面，并且会将这个文件的路径存储到数据库中。

指定MEDIA_ROOT和MEDIA_URL：

以上我们是使用了 upload_to 来指定上传的文件目录。我们也可以指定 MEDIA_ROOT，就不需要在FielField 中指定 upload_to，他会自动的将文件上传到 MEDIA_ROOT 的目录下。

MEDIA_ROOT=os.path.join(BASE_DIR,'media')
MEDIA_URL='/media/'

然后我们可以在urls.py中添加MEDIA_ROOT目录下的访问路径。示例代码如下：

from django.urls import path
from front import views
from django.conf.urls.static import static
from django.conf import settings

urlpatterns=[
    path('', views.index),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

如果我们同时指定MEDIA_ROOT和upload_to，那么会将文件上传到MEDIA_ROOT下的upload_to文件夹中。示例代码如下：

class Article(models.Model):
    title=models.CharField(max_length=100)
    content=models.TextField()
    thumbnail=models.FileField(upload_to="%Y/%m/%d/")

限制上传的文件拓展名：

如果想要限制上传的文件的拓展名，那么我们就需要用到表单来进行限制。我们可以使用普通的 Form表单，也可以使用 ModelForm，直接从模型中读取字段。示例代码如下：

# models.py
class Article(models.Model):
    title=models.CharField(max_length=100)
    content=models.TextField()
    thumbnial=models.FileField(upload_to='%Y/%m/%d/',validators=[validators.FileExtensionValidator(['txt','pdf'])])

# forms.py
class ArticleForm(forms.ModelForm):
    class Meta:
        model=Article
        fields="__all__"

上传图片：

上传图片跟上传普通文件是一样的。只不过是上传图片的时候 Django 会判断上传的文件是否是图片的格式（除了判断后缀名，还会判断是否是可用的图片）。如果不是，那么就会验证失败。我们首先先来定义一个包含ImageField的模型。示例代码如下：

class Article(models.Model):
    title=models.CharField(max_length=100)
    content=models.TextField()
    thumbnail=models.ImageField(upload_to="%Y/%m/%d/")

因为要验证是否是合格的图片，因此我们还需要用一个表单来进行验证。表单我们直接就使用 ModelForm就可以了。示例代码如下：

class MyForm(forms.ModelForm):
    class Meta:
        model=Article
        fields="__all__"

注意：使用ImageField，必须要先安装Pillow库：pip install pillow

使用Ajax上传文件

利用Ajax上传文件的好处是上传文件后无需刷新页面或调整即可立即显示文件上传信息。

前端

<div>
    <input type="file" name="file" id="file_upload">
    <input type="button" value="上传" onclick="FileUpload()">
</div>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
    function FileUpload() {
            var form_data=new FormData();
            var file_info=$( '#file_upload')[0].files[0];
            form_data.append('file',file_info);
            if(file_info==undefined) { #暂且不许要判断是否有附件
                alert('你没有选择任何文件');
                return false
            }
            $.ajax({
                url:'/upload_ajax/',
                type:'POST',
                data: form_data,
                processData: false,  // tell jquery not to process the data
                contentType: false, // tell jquery not to set contentType
                success: function(callback) {
                    console.log('ok')
                }
            });
      }
</script>

后端

def upload_ajax(request):
    if request.method=='POST':
        file_obj=request.FILES.get('file')
        import os
        f=open(os.path.join(BASE_DIR, 'static', 'pic', file_obj.name), 'wb')
        print(file_obj,type(file_obj))
        for chunk in file_obj.chunks():
            f.write(chunk)
        f.close()
        print('11111')
        return HttpResponse('OK')

Vue中上传代码

现在我们在做 web 开发的时候，基本上都使用前后端分离框架，vue 作为后起之秀，应用范围也是非常广的。前端示例代码如下：

<template>
    <div>
        添加商品<input v-model="name"><br>
        价格<input v-model="price"><br>
        商品照片<input type="file" id="ssss"><br>
        <button @click="add">添加</button>
    </div>
</template>
<script>
    export default {
        name: "addcate",
        data:function () {
            return{
                name:'',
                price:'',
            }
        },
        methods: {
            add:function () {
                var data=new FormData();
                data.append('name',this.name);
                data.append('price',this.price);
                var image=document.getElementById('ssss').files[0];
                data.append('file',image);
                this.axios({
                    url:'/api/sadmin/addcate/',
                    data:data,
                    method:'post'
                }).then((res)=>{
                    if (res.data.code==200){
                        this.$router.push({'path':'show'})
                    }
                    alert(res.data.message)
                }).catch((err)=>{
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped>

</style>

后端示例代码如下：

在线咨询

上一篇：Python学习笔记（11）Web页面元素提取
下一篇：想怎么变就怎么变！MaskGAN人脸修图新方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商