具有预览功能的多个图像上传器

Question

我已经创建了图像上传器，但是无法正常工作。我不明白我要去哪里错了。我的图片上传器的JSFIDDLE如下所示：

我面临的问题是，当我单击选择文件并选择多个文件并打开它时，我希望它显示我选择的所有图像的预览，并且可以正常工作，但是当我单击删除按钮时，仅删除预览，这意味着如果我提交文件，即使已删除的文件也将被上传。另一方面，我必须单击“添加更多图像”按钮来创建一个与上述相同的上传器，但是当我添加多个图像时，它不显示任何预览，因此我什至无法选择或删除错误选择的图像。谁能找到我要去的地方。我也需要添加更多图像按钮，以便如果我们忘记添加一些图像，或者图像位于不同目录中，我们可以再调用一个输入类型文件，其功能应与先前相同。

Answer 1

所以，您在做一些奇怪的事情（例如，使用分配了整数的全局变量，我假设您使用该变量来跟踪对象）。

我已经清理了您的工作，并删除了一些多余的功能。本质上，您需要更好地利用JavaScript FileReader()功能。您需要仔细查看按钮；因为我没有为您修复它们。 ;）

您需要做的是遍历this.files数组，并使用FileReader()函数显示结果。下面的代码。

    $('#add_more').click(function() {
      "use strict";
      $(this).before($("<div/>", {
        id: 'filediv'
      }).fadeIn('slow').append(
        $("<input/>", {
          name: 'file[]',
          type: 'file',
          id: 'file',
          multiple: 'multiple',
          accept: 'image/*'
        })
      ));
    });

    $('#upload').click(function(e) {
      "use strict";
      e.preventDefault();

      if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") {
        alert("No files are selected.");
        return false;
      }

      // Now, upload the files below...
      // https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
    });

    function deletePreview(ele, i) {
      "use strict";
      try {
        $(ele).parent().remove();
        window.filesToUpload.splice(i, 1);
      } catch (e) {
        console.log(e.message);
      }
    }

    $("#file").on('change', function() {
      "use strict";

      // create an empty array for the files to reside.
      window.filesToUpload = [];

      if (this.files.length >= 1) {
        $("[id^=previewImg]").remove();
        $.each(this.files, function(i, img) {
          var reader = new FileReader(),
            newElement = $("<div id='previewImg" + i + "' class='abcd'><img /></div>"),
            deleteBtn = $("<span class='delete' onClick='deletePreview(this, " + i + ")'>delete</span>").prependTo(newElement),
            preview = newElement.find("img");

          reader.onloadend = function() {
            preview.attr("src", reader.result);
            preview.attr("alt", img.name);
          };

          try {
            window.filesToUpload.push(document.getElementById("file").files[i]);
          } catch (e) {
            console.log(e.message);
          }

          if (img) {
            reader.readAsDataURL(img);
          } else {
            preview.src = "";
          }

          newElement.appendTo("#filediv");
        });
      }
    });

#formdiv {
  text-align: center;
}
#file {
  color: green;
  padding: 5px;
  border: 1px dashed #123456;
  background-color: #f9ffe5;
}
#img {
  width: 17px;
  border: none;
  height: 17px;
  margin-left: -20px;
  margin-bottom: 191px;
}
.upload {
  width: 100%;
  height: 30px;
}
.abcd {
  text-align: center;
  position: relative;
}
.abcd img {
  height: 200px;
  width: 200px;
  padding: 5px;
  border: 1px solid rgb(232, 222, 189);
}
.delete {
  color: red;
  font-weight: bold;
  position: absolute;
  top: 0;
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formdiv">
  <div id="filediv">
    <input type="file" id="file" name="files[]" multiple="multiple" accept="image/*" title="Select Images To Be Uploaded">
    <br>
  </div>
  <input type="button" id="add_more" class="upload" value="Add More Images" />
  <input type="submit" name="submit" value="Add Product" class="upload" id="upload" title="Add Product To The Inventory">
</div>

Answer 2

这是我第一次为StackOverflow做贡献。我希望这可以帮助别人。我是Web开发的新手。但是，如果有人可以将javascript代码变成一个循环，我将不胜感激。下面的代码可以使用其唯一的name =“ name”;

轻松地将多个图像上传到服务器。

function showPreviewOne(event){
    if(event.target.files.length > 0){
      let src = URL.createObjectURL(event.target.files[0]);
      let preview = document.getElementById("file-ip-1-preview");
      preview.src = src;
      preview.style.display = "block";
    } 
  }
  function myImgRemoveFunctionOne() {
      document.getElementById("file-ip-1-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
    }
    /* **************************************************************************************** */

    function showPreviewTwo(event){
      if(event.target.files.length > 0){
        let src = URL.createObjectURL(event.target.files[0]);
        let preview = document.getElementById("file-ip-2-preview");
        preview.src = src;
        preview.style.display = "block";
      } 
    }
    function myImgRemoveFunctionTwo() {
        document.getElementById("file-ip-2-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
      }
    /* **************************************************************************************************** */
    function showPreviewThree(event){
      if(event.target.files.length > 0){
        let src = URL.createObjectURL(event.target.files[0]);
        let preview = document.getElementById("file-ip-3-preview");
        preview.src = src;
        preview.style.display = "block";
      } 
    }
    function myImgRemoveFunctionThree() {
        document.getElementById("file-ip-3-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
      }
    /* **************************************************************************************************** */
    function showPreviewFour(event){
      if(event.target.files.length > 0){
        let src = URL.createObjectURL(event.target.files[0]);
        let preview = document.getElementById("file-ip-4-preview");
        preview.src = src;
        preview.style.display = "block";
      } 
    }
    function myImgRemoveFunctionFour() {
        document.getElementById("file-ip-4-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
      }
      /* **************************************************************************************** */
  
      function showPreviewFive(event){
        if(event.target.files.length > 0){
          let src = URL.createObjectURL(event.target.files[0]);
          let preview = document.getElementById("file-ip-5-preview");
          preview.src = src;
          preview.style.display = "block";
        } 
      }
      function myImgRemoveFunctionFive() {
          document.getElementById("file-ip-5-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
        }
      /* **************************************************************************************************** */
      function showPreviewSix(event){
        if(event.target.files.length > 0){
          let src = URL.createObjectURL(event.target.files[0]);
          let preview = document.getElementById("file-ip-6-preview");
          preview.src = src;
          preview.style.display = "block";
        } 
      }
      function myImgRemoveFunctionSix() {
          document.getElementById("file-ip-6-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
        }
      /* **************************************************************************************************** */

  body {
    margin:0px;
    padding:0px;
    background:#f1f1f1;
  }
 .image-upload-one{
    grid-area: img-u-one;
    display: flex;
    justify-content: center;
  }
  .image-upload-two{
    grid-area: img-u-two;
    display: flex;
    justify-content: center;
  }
  .image-upload-three{
    grid-area: img-u-three;
    display: flex;
    justify-content: center;
  }
  .image-upload-four{
    grid-area: img-u-four;
    display: flex;
    justify-content: center;
  }
  .image-upload-five{
    grid-area: img-u-five;
    display: flex;
    justify-content: center;
  }
  .image-upload-six{
    grid-area: img-u-six;
    display: flex;
    justify-content: center;
  }

  .image-upload-container{
    display: grid;
    grid-template-areas: 'img-u-one img-u-two img-u-three img-u-four img-u-five img-u-six';
  }
  .center {
    display:inline;
    margin: 3px;
  }

  .form-input {
    width:100px;
    padding:3px;
    background:#fff;
    border:2px dashed dodgerblue;
  }
  .form-input input {
    display:none;
  }
  .form-input label {
    display:block;
    width:100px;
    height: auto;
    max-height: 100px;
    background:#333;
    border-radius:10px;
    cursor:pointer;
  }
  
  .form-input img {
    width:100px;
    height: 100px;
    margin: 2px;
    opacity: .4;
  }

  .imgRemove{
    position: relative;
    bottom: 114px;
    left: 68%;
    background-color: transparent;
    border: none;
    font-size: 30px;
    outline: none;
  }
  .imgRemove::after{
    content: ' \21BA';
    color: #fff;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
  }

  .small{
    color: firebrick;
    font-size:15px;
  }

  @media only screen and (max-width: 700px){
    .image-upload-container{
      grid-template-areas: 'img-u-one img-u-two img-u-three'
       'img-u-four img-u-five img-u-six';
    }
  }

 <div class="image-upload-container">
      <div class="image-upload-one">
        <div class="center">
          <div class="form-input">
            <label for="file-ip-1">
              <img id="file-ip-1-preview" src="https://i.ibb.co/ZVFsg37/default.png">
              <button type="button" class="imgRemove" onclick="myImgRemoveFunctionOne()"></button>
            </label>
            <input type="file"  name="img_one" id="file-ip-1" accept="image/*" onchange="showPreviewOne(event);">
          </div>
          <small class="small">Use the &#8634; icon to reset the image</small>
        </div>
      </div>
      <!-- ************************************************************************************************************ -->
      <div class="image-upload-two">
        <div class="center">
          <div class="form-input">
            <label for="file-ip-2">
              <img id="file-ip-2-preview" src="https://i.ibb.co/ZVFsg37/default.png">
              <button type="button" class="imgRemove" onclick="myImgRemoveFunctionTwo()"></button>
            </label>
            <input type="file" name="img_two" id="file-ip-2" accept="image/*" onchange="showPreviewTwo(event);">
          </div>
          <small class="small">Use the &#8634; icon to reset the image</small>
        </div>
      </div>

      <!-- ************************************************************************************************************ -->
      <div class="image-upload-three">
        <div class="center">
          <div class="form-input">
            <label for="file-ip-3">
              <img id="file-ip-3-preview" src="https://i.ibb.co/ZVFsg37/default.png">
              <button type="button" class="imgRemove" onclick="myImgRemoveFunctionThree()"></button>
            </label>
            <input type="file" name="img_three" id="file-ip-3" accept="image/*" onchange="showPreviewThree(event);">
          </div>
          <small class="small">Use the &#8634; icon to reset the image</small>
        </div>
      </div>
      <!-- *********************************************************************************************************** -->
        <div class="image-upload-four">
          <div class="center">
            <div class="form-input">
              <label for="file-ip-4">
                <img id="file-ip-4-preview" src="https://i.ibb.co/ZVFsg37/default.png">
                <button type="button" class="imgRemove" onclick="myImgRemoveFunctionFour()"></button>
              </label>
              <input type="file" name="img_four" id="file-ip-4" accept="image/*" onchange="showPreviewFour(event);">
            </div>
            <small class="small">Use the &#8634; icon to reset the image</small>
          </div>
        </div>
        <!-- ************************************************************************************************************ -->
        <div class="image-upload-five">
          <div class="center">
            <div class="form-input">
              <label for="file-ip-5">
                <img id="file-ip-5-preview" src="https://i.ibb.co/ZVFsg37/default.png">
                <button type="button" class="imgRemove" onclick="myImgRemoveFunctionFive()"></button>
              </label>
              <input type="file" name="img_five" id="file-ip-5" accept="image/*" onchange="showPreviewFive(event);">
            </div>
            <small class="small">Use the &#8634; icon to reset the image</small>
          </div>
        </div>
  
        <!-- ************************************************************************************************************ -->
        <div class="image-upload-six">
          <div class="center">
            <div class="form-input">
              <label for="file-ip-6">
                <img id="file-ip-6-preview" src="https://i.ibb.co/ZVFsg37/default.png">
                <button type="button" class="imgRemove" onclick="myImgRemoveFunctionSix()"></button>
              </label>
              <input type="file" name="img_six" id="file-ip-6" accept="image/*" onchange="showPreviewSix(event);">
            </div>
            <small class="small">Use the &#8634; icon to reset the image</small>
          </div>
        </div>

      <!-- ************************************************************************************************************** -->
    </div>

具有预览功能的多个图像上传器

问题描述投票：0回答：2

2个回答

最新问题

具有预览功能的多个图像上传器

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2