Question

我正在使用Dropzone.js创建用户的个人资料并使其更具动态性。用户可以通过Dropzone拖放最多3个图像，并能够选择其中一个图像作为个人资料图片。它基本上是一张物化卡片，左侧是个人资料图片，右侧是3个图片的dropzone池。

我在左侧为个人资料图片创建了一个dropzone表单，在右侧创建了一个用于3个图片上传功能的dropzone表单。

我需要帮助

如何为配置文件照片（左侧）的maxFiles设置为1，为右侧的图像集合设置maxFiles 3。我将Dropzone.js文件夹中的maxFiles从null更改为3，但它不起作用。这是Dropzone v4，所以当我更改MaxFiles时，我不确定为什么它不起作用：null，MaxFiles：3，
您如何创建一些用户可以点击右侧三个图像之一并自动更新左侧个人资料图片的内容。

这是JSFiddle https://jsfiddle.net/j8mf8k1v/

<div id="profile-card" class="section scrollspy">
  <div class="card">
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Profile Pictures<i
         class="material-icons right">more_vert</i></span>
          <div class="row">
            <div class="imgOutput">
                <textarea id="imgSrc" name="imgSrc" class="general employee materialize-textarea hide"></textarea>
                <!-- Current Profile Picture:<br><br>
                <img id="imgPic" src=""><br> -->
                 Current Profile Picture:<br><br>
                  <div class="rightpanel" style="width: 500px;height: 250px">
                    Upload new images:
                    <form action="upload.php" class="dropzone">
                    </form>
                  </div>
            <div class="leftpanel" style="width: 200px;height: 250px">
              Update Profile Image:
              <form action="upload.php" class="dropzone">
              </form>
            </div>
          </div><br><br>
          <div class="input-field col s12">
            <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();"  />
          </div>
    </div>
  </div>
  <div class="card-reveal">
     <span class="card-title grey-text text-darken-4">Profile Picture Options<i
     class="material-icons right">close</i></span>
  </div>
 </div>
</div>

谢谢

Dropzone.js图片上传到个人资料照片拖放功能

0 个答案: