拖拽选择放置预览

时间:2016-02-04 20:29:27

标签: javascript php jquery

为什么我在选择图像时无法传递值?

如果您手动放置图像,它可以操作选择。

/* JavaScript */

var readURL = function(input) {
  $('.up_images').empty();
  var number = 0;
  $.each(input.files, function(value) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var id = (new Date).getTime();
      number++;
      $('.up_images').prepend('<img id=' + id + ' src=' + e.target.result + ' width="100px" height="100px" data-value=' + number + ' />')
    };
    reader.readAsDataURL(input.files[value]);
  });
}

$(document).ready(function() {
  $(".up_images img").click(function() {
    $("#image-value").val($(this).attr("data-value"));
    $(".up_images img").removeClass(".selected");
    $(this).addClass(".selected");
  });
});
/* CSS */

.selected {
  box-shadow: 0px 12px 22px 1px #333;
}
<!-- HTML -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input multiple="1" onchange="readURL(this);" id="uploadedImages" name="pictures[]" type="file">

<div class="up_images"></div>
<input type="text" id="image-value" name="image-value" value="" />

0 个答案:

没有答案