Use JavaScript functions to upload and download files

Use JavaScript functions to implement file upload and download

With the development and popularization of the Internet, file upload and download have become one of the common functions in web applications. This article will introduce how to use JavaScript functions to implement file upload and download functions, and provide specific code examples.

1. File upload

File upload refers to uploading local files to the server through the web page. File API is provided in HTML5 to handle file selection and upload. We can use the FileReader object in the File API to read the file content and send the file to the server through the XMLHttpRequest object.

The following is a JavaScript function code example to implement file upload:

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('文件上传成功');
    }
  };
  xhr.send(formData);
}

In the above code, we first obtain the DOM object of the file selection box, and then remove the selected file. Next, create a FormData object and add the selected files to the FormData. Then, create an XMLHttpRequest object and use the open() method to specify the upload URL and request method. Monitor the status change of XMLHttpRequest through the onreadystatechange event. When the status is 4 and the status code is 200, it means the file upload is successful. Finally, call the send() method to send the FormData to the server.

2. File download

File download refers to downloading files from the server to the local. In JavaScript, you can download a file by creating a <a> element with a file download link and simulating a click.

The following is an example of JavaScript function code to implement file download:

function downloadFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/download', true);
  xhr.responseType = 'blob';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var blob = xhr.response;
      var link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'file.txt';
      link.click();
    }
  };
  xhr.send();
}

In the above code, we first create an XMLHttpRequest object and use the open() method to specify the download URL and request method. for GET. Set responseType to 'blob' to receive the file as binary data. Monitor the status change of XMLHttpRequest through the onreadystatechange event. When the status is 4 and the status code is 200, it means the file download is successful. Then, by creating a <a> element, convert the response blob object into a URL, and assign the URL to the href attribute of the <a> element. Set the filename to 'downloaded.txt'. Finally, simulate clicking on the <a> element to trigger the file download.

In summary, by using JavaScript functions, we can easily implement file upload and download functions. Through the File API and XMLHttpRequest object, we can read and send files. By creating the <a> element and simulating a click, we can download the file. In actual applications, we can expand and optimize these functions according to specific needs.

The above is the detailed content of Use JavaScript functions to upload and download files. For more information, please follow other related articles on the PHP Chinese website!