jQuery上传图片详解

发布时间：2023-05-20

一、jQuery上传图片组件

jQuery上传图片组件是一个基于jQuery库的JavaScript插件，用于方便地实现图片上传功能。它封装了大量的上传操作，简化了开发者的操作，使得在网页中上传图片变得更加简单和方便。 使用该组件，我们可以实现以下功能：

  • 支持多图上传；
  • 支持队列上传（即上传多张图片时，一个一个上传，上一个上传完毕才会进行下一个）；
  • 通过图片预览功能，帮助用户选定需要上传的图片；
  • 支持上传进度条显示；
  • 支持上传成功、失败后的回调函数；
  • 支持上传图片的格式限制；
  • 支持上传图片大小的限制。 在使用之前需要引入jQuery库和该插件的js和css文件。

二、jQuery上传图片怎么写

这里我们以一个简单的demo为例，介绍如何使用jQuery上传图片组件：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>jQuery上传图片示例</title>
   <link href="jquery.fileupload.css" rel="stylesheet" />
</head>
<body>
   <input id="file" type="file" name="file[]" multiple />
   <div id="preview"></div>
   <button id="upload">上传</button>
   <script src="jquery.js"></script>
   <script src="jquery.fileupload.js"></script>
   <script>
      $(function () {
         $('#file').fileupload({
            url: 'upload.php',
            dataType: 'json',
            done: function (e, data) {
               $.each(data.result.files, function (index, file) {
                  $('<p></p>').text(file.name).appendTo('#preview');
               });
            },
            progressall: function (e, data) {
               var progress = parseInt(data.loaded / data.total * 100, 10);
               $('#progress .bar').css(
                  'width',
                  progress + '%'
               );
            }
         });
         $('#upload').click(function () {
            $('#file').fileupload('send', {
               files: $('#file').get(0).files,
               formData: { user_id: 123 }
            });
         });
      });
   </script>
</body>
</html>

上面的html代码中，我们先引入了jQuery库和上传组件的js和css文件。然后，在input标签中使用multiple属性支持多图上传，再添加一个div预览上传的图片，和一个上传按钮。最后，在JavaScript代码中，我们调用了jQuery的fileupload()方法，并设置了必要的参数，以便实现图片上传功能。其中，'upload.php'是图片上传提交的地址，需要根据实际情况进行修改。

三、jQuery图片插件

除了上面所提到的上传组件，jQuery还有其他的插件可以帮助我们更方便地实现图片操作功能。

  • jQuery图片裁剪插件：可以帮助用户自定义裁剪图片的范围。
  • jQuery图片放大镜插件：可以让用户鼠标移动在图片上时，看到放大后的图片效果。
  • jQuery图片播放器插件：可以帮助用户在网页中播放图片组成的幻灯片。
  • jQuery图片懒加载插件：可以实现图片在滚动到可视区域时才加载。

四、jQuery上传图片传到后端是空

在使用jQuery上传图片组件时，有时会遇到上传成功，但是在后端接收到的图片为空的问题。这时，我们需要检查以下几点：

  • 是否设置了enctype="multipart/form-data"属性；
  • 是否使用了$_FILES数组来获取上传的文件，而非$_POST；
  • 是否检查了uploads文件夹的写入权限。 除此之外，还有可能是PHP的配置问题。可以查看php.ini文件中upload_max_filesize、post_max_size、max_file_uploads等选项的设置，是否限制了上传的文件大小和数量。

五、jQuery传图片给后端

在使用jQuery上传图片组件时，如何将选择的图片传输给后端呢？我们可以使用formData参数来传输其他的数据。 示例代码如下：

$('#upload').click(function () {
   $('#file').fileupload('send', {
      files: $('#file').get(0).files,
      formData: { user_id: 123 }
   });
});

上面代码中，我们在formData参数中添加了一个参数user_id，它的值为123。在后端处理的时候，可以用$_POST['user_id']获取到传过来的值。如果需要传递更多的参数，可以添加更多的键值对到formData中。

推荐文章