一、input上传文件详解

小蓝 • 2024-11-28 13:31 • 编程

1. input上传文件保存

input标签有个type为file，用于选择上传文件。在提交表单时需要注意enctype属性设置为multipart/form-data。接收文件的后端可以通过request.FILES.get(‘file’)来拿到上传的文件对象。

<form method="post" enctype="multipart/form-data" action="{% url 'upload' %}">
  {% csrf_token %}
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

2. input上传文件第二次获取不到

由于input的type为file，每次选择完文件后会在网页上留下缓存，因此如果用户再次选择同一个文件上传，后端是获取不到文件对象的。因此，需要在input标签中添加一个自定义的属性，让每次选择文件时都能创建新的input标签。

<input id="file" type="file" name="file">
<button type="button" onclick="document.getElementById('file').click()">选择文件</button>

<script>
  document.getElementById('file').onchange = function() {
    var file = this.files[0];
    var input = document.createElement('input');
    input.type = 'file';
    input.name = 'file';
    input.style.display = 'none';
    this.parentNode.appendChild(input);
    input.click();
    this.parentNode.removeChild(this);
  };
</script>

3. input上传文件夹

目前还没有原生的input组件支持上传文件夹，但是可以借助一些插件实现上传文件夹的功能，比如WebUploader，Fine uploader等。

4. input上传文件完成

上传文件完成后，可以在前端根据后端返回的数据进行提示。比如可以在页面上显示上传成功或上传失败的状态。

$.ajax({
  url: '/upload/',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false,
  success: function(data) {
    alert('上传成功');
  },
  error: function(data) {
    alert('上传失败');
  }
});

5. input上传文件修改按钮名字

可以修改input上传文件按钮的名字，修改后的名字会显示在选择文件的按钮上。

<input type="file" name="file" accept="image/*" onchange="document.getElementById('file').value=this.value">

二、input多文件上传

1. input多文件上传

在input标签上添加multiple属性，即可实现多文件上传功能。

<input type="file" name="file" multiple>

2. input上传文件重复上传失败

由于每个上传的文件都有唯一的文件名，因此如果上传的文件名相同则会上传失败。可以在前端对文件名进行处理，使其在后端不会重复。

<input type="file" name="file" onchange="formatFileName(this)">

<script>
  function formatFileName(input) {
    var files = input.files;
    for (var i = 0; i < files.length; i++) {
      var suffix = files[i].name.substring(files[i].name.lastIndexOf('.'));
      var newname = Date.now() + suffix;
      files[i].name = newname;
    }
  }
</script>

3. input上传文件时无法选择文件

出现这种情况一般是因为浏览器禁止访问本地文件，可以尝试更换浏览器或者检查浏览器设置。

三、input上传文件获取文件上传路径

1. input上传文件获取文件上传路径

input上传文件的path属性是只读的，无法通过JavaScript获取。

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

<script>
  var path = document.getElementById('file').value; // 获取不到上传文件的路径
</script>

2. input上传文件怎么知道上传完成

上传文件完成后，后端会返回上传文件的信息，前端可以根据这些信息判断上传是否成功。

$.ajax({
  url: '/upload/',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false,
  success: function(data) {
    if (data.code === 0) {
      alert('上传成功');
    } else {
      alert('上传失败');
    }
  },
  error: function(data) {
    alert('上传失败');
  }
});

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188513.html