Ajax上傳文件：從進度條到資料庫

一、Ajax上傳文件進度條

在上傳大文件時，我們可能需要提供進度條來提示用戶上傳進度，使用Ajax可以實現無刷新上傳，同時通過XMLHttpRequest對象的upload屬性可以監聽上傳進度事件，從而實現進度條的展示。

var form = document.getElementById('upload-form');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

xhr.upload.addEventListener('progress', function(event) {
  var percent = event.loaded / event.total * 100;
  // 展示進度條
});

xhr.send(new FormData(form));

二、Ajax上傳文件代碼放在哪裡

一般來說，我們可以將Ajax上傳文件的代碼放在
onsubmit事件中，來監聽文件是否已經選擇。

<form id="upload-form" enctype="multipart/form-data" method="POST">
  <input type="file" name="file">
  <input type="submit" value="上傳">
</form>

<script>
var form = document.getElementById('upload-form');
var xhr = new XMLHttpRequest();

form.addEventListener('submit', function(event) {
  event.preventDefault();

  var formData = new FormData(form);
  xhr.open('POST', '/upload', true);

  xhr.send(formData);
});
</script>

三、Ajax上傳文件代碼

Ajax上傳文件的代碼實現相對比較簡單，主要是將表單數據通過XMLHttpRequest對象發送到伺服器。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 處理上傳成功後的操作
  }
};
var formData = new FormData();
formData.append('file', document.getElementById('file-input').files[0]);
xhr.send(formData);

四、Ajax上傳文件兩種方式

Ajax上傳文件有兩種方式：formdata和傳統的XHR。

// formdata方式
var formData = new FormData();
formData.append('file', document.getElementById('file-input').files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 處理上傳成功後的操作
  }
};
xhr.send(formData);

// 傳統的XHR方式
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 處理上傳成功後的操作
  }
};
var body = new FormData();
body.append('file', file);
xhr.send(body);

五、Ajax上傳文件到資料庫

如果我們需要將上傳的文件保存到資料庫中，我們需要通過Ajax將文件數據傳遞給後端，然後在後端將數據保存到資料庫中。

// 前端代碼
var formData = new FormData();
formData.append('file', document.getElementById('file-input').files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 處理上傳成功後的操作
  }
};
xhr.send(formData);

// 後端代碼（使用Node.js和MongoDB為例）
app.post('/upload', upload.single('file'), function(req, res) {
  var file = req.file;
  var filePath = file.path;

  var grid = new Grid(mongoose.connection.db);
  var options = {
    content_type: file.mimetype,
    metadata: {
      name: file.originalname
    }
  };

  var read_stream = grid.createReadStream({
    filename: filePath
  });
  var write_stream = grid.createWriteStream(options);
  read_stream.pipe(write_stream);

  write_stream.on('close', function (file) {
    // 文件保存成功後的操作
  });
});

六、Ajax上傳文件formdata

FormData對象提供了一些方法，可以方便地添加二進位數據、鍵值對數據以及文件數據，即可以在Ajax請求中包含文件上傳的邏輯。

var formData = new FormData();
formData.append('name', 'value');
formData.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 處理上傳成功後的操作
  }
};
xhr.send(formData);

七、Ajax上傳文件和參數

通過在FormData中添加鍵值對數據，可以方便地將表單數據和文件數據一併上傳。

var formData = new FormData();
formData.append('name', 'value');
formData.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 處理上傳成功後的操作
  }
};
xhr.send(formData);

八、AjaxFileUpload上傳文件

AjaxFileUpload是一個jQuery插件，可以實現無刷新上傳文件。

<form id="upload-form" enctype="multipart/form-data" method="POST">
  <input type="file" name="file">
  <input type="submit" value="上傳">
</form>

<script>
$(document).ready(function() {
  var options = {
    beforeSubmit: function() {
      // 處理上傳前的操作
    },
    beforeSend: function() {
      // 處理上傳前的操作
    },
    uploadProgress: function(event, position, total, percentComplete) {
      // 處理上傳進度的操作
    },
    success: function() {
      // 處理上傳成功後的操作
    },
    error: function() {
      // 處理上傳失敗後的操作
    },
    complete: function() {
      // 處理上傳完成後的操作
    }
  };
  $('#upload-form').ajaxForm(options);
});
</script>

九、jQuery上傳文件

使用jQuery可以簡化Ajax上傳文件的流程，同時通過ajaxStart和ajaxStop可以方便地添加上傳進度條。

<form id="upload-form" enctype="multipart/form-data" method="POST">
  <input type="file" name="file">
  <input type="submit" value="上傳">
</form>

<script>
$(document).ready(function() {
  $('#upload-form').submit(function() {
    $(this).ajaxSubmit({
      beforeSubmit: function() {
        // 處理上傳前的操作
      },
      beforeSend: function() {
        // 處理上傳前的操作
      },
      uploadProgress: function(event, position, total, percentComplete) {
        // 處理上傳進度的操作
      },
      success: function() {
        // 處理上傳成功後的操作
      },
      error: function() {
        // 處理上傳失敗後的操作
      },
      complete: function() {
        // 處理上傳完成後的操作
      }
    });
    return false;
  });

  $(document).ajaxStart(function() {
    // 顯示上傳進度條
  }).ajaxStop(function() {
    // 隱藏上傳進度條
  });
});
</script>