jquery移动端多图上传

JQuery是一个著名的JavaScript库，被广泛用于网站的开发与交互。在移动端的开发中，JQuery也是备受青睐的工具之一。本文将介绍如何使用JQuery实现移动端多图上传。

首先，我们需要引入JQuery库。在HTML文档中添加以下代码：

  
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  

然后，在HTML页面中添加一个用来显示图片的容器，如下所示：

  
    <div id="imageContainer"></div>
  

接下来，我们需要编写一个JS函数来实现图片的上传。首先，我们需要创建一个文件选择器，让用户选择需要上传的图片。代码如下：

  
    $('#fileSelector').on('change',function() {
      var files = $(this).get(0).files;
      if (files.length > 0) {
        var file = files[0];
        var reader = new FileReader();
        reader.onload = function() {
          var img = new Image();
          img.src = reader.result;
          $('#imageContainer').append(img);
        }
        reader.readAsDataURL(file);
      }
    });
  

上述代码中，我们使用了JQuery中的on()函数来监听文件选择器的change事件，获取用户选择的文件。然后，通过FileReader对象将文件转换为DataURL格式，再将其插入到图片容器中。

最后，我们需要在HTML页面中添加一个文件选择器，让用户选择图片。代码如下：

  
    <input type="file" id="fileSelector" accept="image/*" multiple />
  

上述代码中，我们设置了文件选择器的accept属性，让其只能选择图片格式的文件。同时，我们也设置了multiple属性，让其可以选择多个文件。

至此，我们已经完成了移动端多图上传的实现。通过JQuery的强大功能，我们可以轻松地实现各种交互效果，让我们的网站变得更加美观与实用。