jquery 传输文件

颜贵龙 3个月前 45浏览 0评论

在前端开发中,经常需要将文件从客户端传输到服务器端。利用jQuery库,我们可以方便地实现文件传输功能。

具体实现步骤如下:

  
  // 文件上传函数
  function uploadFile() {
    // 构造FormData对象,用于文件上传
    var formData = new FormData();
    // 获取文件对象
    var file = $('#fileInput').get(0).files[0];
    // 将文件对象添加到FormData对象中
    formData.append('file', file);
    // 发送请求
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      // 告诉jQuery不要将FormData对象转换成字符串
      processData: false,
      // 告诉jQuery不要设置Content-Type请求头
      contentType: false,
      success: function(data) {
        console.log(data);
      },
      error: function(xhr, errorType, error) {
        console.log(error);
      }
    });
  }

  // 监听文件上传按钮的点击事件
  $('#uploadBtn').click(function() {
    uploadFile();
  });
  

上述代码中,通过获取文件输入框中的文件对象,在前端构造一个FormData对象,然后通过ajax向服务器端发送请求。注意,由于上传文件需要发送二进制数据,因此需要告诉jQuery不要将FormData对象转换成字符串,同时也需要告诉jQuery不要设置Content-Type请求头。