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('上傳失敗');
  }
});