一、input上传文件详解

1. input上传文件保存

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


  {% csrf_token %}



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







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多文件上传

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




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






3. input上传文件时无法选择文件
出现这种情况一般是因为浏览器禁止访问本地文件，可以尝试更换浏览器或者检查浏览器设置。

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

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






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('上传失败');
  }
});