javascript - 在上传之前使用 Javascript 获取图像名称 onclick

Question

我从一个文件输入上传图像，但在此之前我用 javascript 显示它们。我想添加一个功能来选择点击时的主图像。我想将单击的图像的名称存储在隐藏的输入中。我的问题是我无法通过单击图像本身来获取图像的原始名称。我找到了一个解决方案，但会显示每个图像名称。例如，我选择这些图像：

Example.jpg, Example2.png, Example3.jpg

我这样显示它们：

<div class="uploaded-image" data-index="1" id="image-1">
  <img src="blob:http://localhost/5e75ca0e-f912-461e-98a6-9f8ad302bc84">
  <button class="delete-image"><i class="iui-close"></i></button>
</div>
<div class="uploaded-image" data-index="2" id="image-2">
  <img src="blob:http://localhost/5e75ca0e-f912-461e-98a6-9f831344adc84">
  <button class="delete-image"><i class="iui-close"></i></button>
</div>

当我点击 image-1 时，我想让 Example.jpg 进入隐藏的文本输入，而不是 blob:...

我发现的唯一解决方案是使用按钮并显示所有这些。如何修改它以仅选择单击的图像？

这是代码：

<input type="submit" value="Show Details" onclick="FileDetails()">

function FileDetails() {

    // GET THE FILE INPUT.
    var fi = document.getElementById('image-upload');

    // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
    if (fi.files.length > 0) {
            console.log(fi.files);

        // RUN A LOOP TO CHECK EACH SELECTED FILE.
        for (var i = 0; i <= fi.files.length - 1; i++) {
            fi.files[0] = document.getElementById('image-1')
            

            var fname = fi.files.item(i).name; // THE NAME OF THE FILE.
            console.log(fname);

        }
    } else {
        alert('Please select a file.')
    }
}

标签： javascriptjquery

Answer 1

在您的插件文件中已经有一个事件，即：$container.on("click", function(e) {只要image单击 div 以在输入字段中添加单击图像名称，您就可以在那里编写代码。即：

 $container.on("click", function(e) {
   var fi = $("input[type=file]")[0];
   prevent(e);
   //**get files using index (0,1,2..) add value to input..**//
    $("#imgs").val(fi.files.item($(this).data('index')).name)
 });

演示代码：

(function($) {

  $.fn.imageUploader = function(options) {
    let defaults = {
      preloaded: [],
      imagesInputName: 'images',
      preloadedInputName: 'preloaded',
      label: 'Drag & Drop files here or click to browse',
      extensions: ['.jpg', '.jpeg', '.png', '.gif', '.svg'],
      mimes: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'],
      maxSize: undefined,
      maxFiles: undefined,
    };
    let plugin = this;
    let dataTransfer = new DataTransfer();

    // The file input
    let $input;

    // Set empty settings
    plugin.settings = {};

    // Plugin constructor
    plugin.init = function() {

      // Define settings
      plugin.settings = $.extend(plugin.settings, defaults, options);

      // Run through the elements
      plugin.each(function(i, wrapper) {

        // Create the container
        let $container = createContainer();

        // Append the container to the wrapper
        $(wrapper).append($container);

        // Set some bindings
        $container.on("dragover", fileDragHover.bind($container));
        $container.on("dragleave", fileDragHover.bind($container));
        $container.on("drop", fileSelectHandler.bind($container));

        // If there are preloaded images
        if (plugin.settings.preloaded.length) {

          // Change style
          $container.addClass('has-files');

          // Get the upload images container
          let $uploadedContainer = $container.find('.uploaded');

          // Set preloaded images preview
          for (let i = 0; i < plugin.settings.preloaded.length; i++) {
            $uploadedContainer.append(createImg(plugin.settings.preloaded[i].src, plugin.settings.preloaded[i].id, true));
          }

        }

      });

    };

    let createContainer = function() {

      // Create the image uploader container
      let $container = $('<div>', {
        class: 'image-uploader'
      });

      // Create the input type file and append it to the container
      $input = $('<input>', {
        type: 'file',
        id: plugin.settings.imagesInputName + '-' + random(),
        name: plugin.settings.imagesInputName + '[]',
        accept: plugin.settings.extensions.join(','),
        multiple: ''
      }).appendTo($container);

      // Create the uploaded images container and append it to the container
      let $uploadedContainer = $('<div>', {
          class: 'uploaded'
        }).appendTo($container),

        // Create the text container and append it to the container
        $textContainer = $('<div>', {
          class: 'upload-text'
        }).appendTo($container),

        // Create the icon and append it to the text container
        $i = $('<i>', {
          class: 'iui-cloud-upload'
        }).appendTo($textContainer),

        // Create the text and append it to the text container
        $span = $('<span>', {
          text: plugin.settings.label
        }).appendTo($textContainer);


      // Listen to container click and trigger input file click
      $container.on('click', function(e) {
        // Prevent browser default event and stop propagation
        prevent(e);

        // Trigger input click
        $input.trigger('click');
      });

      // Stop propagation on input click
      $input.on("click", function(e) {
        e.stopPropagation();
      });

      // Listen to input files changed
      $input.on('change', fileSelectHandler.bind($container));

      return $container;
    };


    let prevent = function(e) {
      // Prevent browser default event and stop propagation
      e.preventDefault();
      e.stopPropagation();
    };

    let createImg = function(src, id, preloaded) {

      // Create the upladed image container
      let $container = $('<div>', {
          class: 'uploaded-image'
        }),

        // Create the img tag
        $img = $('<img>', {
          src: src
        }).appendTo($container),

        // Create the delete button
        $button = $('<button>', {
          class: 'delete-image'
        }).appendTo($container),

        // Create the delete icon
        $i = $('<i>', {
          class: 'iui-close'
        }).appendTo($button);


      // If the image is preloaded
      if (preloaded) {

        // Set a identifier
        $container.attr('data-preloaded', true);

        // Create the preloaded input and append it to the container
        let $preloaded = $('<input>', {
          type: 'hidden',
          name: plugin.settings.preloadedInputName + '[]',
          value: id
        }).appendTo($container)

      } else {

        // Set the index
        $container.attr('data-index', id);

      }

      //**** on click of image...***//
      $container.on("click", function(e) {
        var fi = $("input[type=file]")[0];
        prevent(e);
        console.log($(this).data('index'))
        console.log(fi.files.item($(this).data('index')).name);
        //**get files using index (0,1,2..) add value to input..**//
        $("#imgs").val(fi.files.item($(this).data('index')).name)
      });

      // Set delete action
      $button.on("click", function(e) {

        // Prevent browser default event and stop propagation
        prevent(e);

        // Get the parent element
        let $parent = $container.parent();

        // If is not a preloaded image
        if ($container.data('preloaded') === true) {

          // Remove from preloaded array
          plugin.settings.preloaded = plugin.settings.preloaded.filter(function(p) {
            return p.id !== id;
          });

        } else {

          // Get the image index
          let index = parseInt($container.data('index'));

          // Update other indexes
          $parent.find('.uploaded-image[data-index]').each(function(i, cont) {
            if (i > index) {
              $(cont).attr('data-index', i - 1);
            }
          });

          // Remove the file from input
          dataTransfer.items.remove(index);

          // Update input files
          $input.prop('files', dataTransfer.files);
        }

        // Remove this image from the container
        $container.remove();

        // If there is no more uploaded files
        if (!$parent.children().length) {

          // Remove the 'has-files' class
          $parent.parent().removeClass('has-files');

        }

      });

      return $container;
    };

    let fileDragHover = function(e) {

      // Prevent browser default event and stop propagation
      prevent(e);

      // Change the container style
      if (e.type === "dragover") {
        $(this).addClass('drag-over');
      } else {
        $(this).removeClass('drag-over');
      }
    };

    let fileSelectHandler = function(e) {

      // Prevent browser default event and stop propagation
      prevent(e);

      // Get the jQuery element instance
      let $container = $(this);

      // Get the files as an array of files
      let files = Array.from(e.target.files || e.originalEvent.dataTransfer.files);

      // Will keep only the valid files
      let validFiles = [];

      // Run through the files
      $(files).each(function(i, file) {
        // Run the validations
        if (plugin.settings.extensions && !validateExtension(file)) {
          return;
        }
        if (plugin.settings.mimes && !validateMIME(file)) {
          return;
        }
        if (plugin.settings.maxSize && !validateMaxSize(file)) {
          return;
        }
        if (plugin.settings.maxFiles && !validateMaxFiles(validFiles.length, file)) {
          return;
        }
        validFiles.push(file);
      });

      // If there is at least one valid file
      if (validFiles.length) {
        // Change the container style
        $container.removeClass('drag-over');

        // Makes the upload
        setPreview($container, validFiles);
      } else {

        // Update input files (it is now empty due to a default browser action)
        $input.prop('files', dataTransfer.files);

      }
    };

    let validateExtension = function(file) {

      if (plugin.settings.extensions.indexOf(file.name.replace(new RegExp('^.*\\.'), '.')) < 0) {
        alert(`The file "${file.name}" does not match with the accepted file extensions: "${plugin.settings.extensions.join('", "')}"`);

        return false;
      }

      return true;
    };

    let validateMIME = function(file) {

      if (plugin.settings.mimes.indexOf(file.type) < 0) {
        alert(`The file "${file.name}" does not match with the accepted mime types: "${plugin.settings.mimes.join('", "')}"`);

        return false;
      }

      return true;
    };

    let validateMaxSize = function(file) {

      if (file.size > plugin.settings.maxSize) {
        alert(`The file "${file.name}" exceeds the maximum size of ${plugin.settings.maxSize / 1024 / 1024}Mb`);

        return false;
      }

      return true;

    };

    let validateMaxFiles = function(index, file) {

      if ((index + dataTransfer.items.length + plugin.settings.preloaded.length) >= plugin.settings.maxFiles) {
        alert(`The file "${file.name}" could not be added because the limit of ${plugin.settings.maxFiles} files was reached`);

        return false;
      }

      return true;

    };

    let setPreview = function($container, files) {

      // Add the 'has-files' class
      $container.addClass('has-files');

      // Get the upload images container
      let $uploadedContainer = $container.find('.uploaded'),

        // Get the files input
        $input = $container.find('input[type="file"]');

      // Run through the files
      $(files).each(function(i, file) {

        // Add it to data transfer
        dataTransfer.items.add(file);

        // Set preview
        $uploadedContainer.append(createImg(URL.createObjectURL(file), dataTransfer.items.length - 1), false);

      });

      // Update input files
      $input.prop('files', dataTransfer.files);

    };

    // Generate a random id
    let random = function() {
      return Date.now() + Math.floor((Math.random() * 100) + 1);
    };

    this.init();

    // Return the instance
    return this;
  };

}(jQuery));
$('.input-images').imageUploader();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="imgs">
<div class="input-images"></div>