当前位置：首页 > jquery

jquery上传

2026-04-07 20:31:28jquery

jQuery 文件上传实现方法

使用 jQuery 实现文件上传可以通过多种方式完成，以下是常见的几种方法：

使用原生表单提交

创建一个包含文件输入的表单，通过 jQuery 监听表单提交事件，阻止默认行为并使用 AJAX 发送文件数据。

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <button type="submit">上传</button>
</form>

$('#uploadForm').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);

  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      console.log('上传成功', response);
    },
    error: function(xhr, status, error) {
      console.error('上传失败', error);
    }
  });
});

使用 jQuery File Upload 插件

jQuery File Upload 是一个功能强大的文件上传插件，支持多文件上传、进度显示等功能。

jquery上传

安装插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-file-upload/5.42.3/js/jquery.fileupload.min.js"></script>

基本使用：

$('#fileInput').fileupload({
  url: 'upload.php',
  dataType: 'json',
  done: function (e, data) {
    $.each(data.result.files, function (index, file) {
      $('<p/>').text(file.name + ' 上传成功').appendTo('#results');
    });
  },
  progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css('width', progress + '%');
  }
});

使用 Dropzone.js

jquery上传

Dropzone.js 是另一个流行的文件上传库，提供拖放上传功能。

初始化：

$("#myDropzone").dropzone({
  url: "/upload",
  paramName: "file",
  maxFilesize: 2,
  acceptedFiles: "image/*",
  addRemoveLinks: true,
  success: function(file, response) {
    console.log("文件上传成功", response);
  }
});

服务器端处理示例

PHP 处理上传文件：

<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
$uploadOk = 1;

if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
  echo json_encode(["success" => true, "message" => "文件上传成功"]);
} else {
  echo json_encode(["success" => false, "message" => "文件上传失败"]);
}
?>

Node.js 处理上传文件（使用 Express 和 multer）：

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ success: true, file: req.file });
});