为包含文件输入缩略图图像的div添加唯一ID

时间:2017-02-21 13:01:20

标签: javascript jquery jquery-ui

我在上传之前有用户所选图片的缩略图预览。它还允许用户使用jQuery UI重新排列图像的顺序。我想通过为包含div的每个缩略图添加唯一ID来跟踪图像的顺序,但我无法生成唯一ID。见下面的代码。理想情况下,我希望div ID与图像名称匹配,因此在表单发布后,我使用它来匹配IEnumerable<HttpPostedFileBase>中的文件名。例如,如果上传的图片被称为pic1.jpg,则包含缩略图的div将为<div id = "pic1">。有问题的行似乎是div.id = File.name,但我无法生成任何类型的唯一ID?

CODE

//jQuery UI sort
$(function () {
  $("#upload-thumbnails").sortable();
  $("#upload-thumbnails").disableSelection();
});
//Thumbnail preview
jQuery(function ($) {
  var filesInput = document.getElementById("ImageUploads");

  filesInput.addEventListener("change", function (event) {

var files = event.target.files; //FileList object
var output = document.getElementById("upload-thumbnails");

for (var i = 0; i < files.length; i++) {
  var file = files[i];

  var picReader = new FileReader();

  picReader.addEventListener("load", function (event) {

    var picFile = event.target;

    var div = document.createElement("div");
    div.id = File.name;
    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
      "title='" + picFile.name + "'/><a href='#' class='remove_pict'>Remove</a>";

    output.insertBefore(div, null);
    div.children[1].addEventListener("click", function (event) {
      div.parentNode.removeChild(div);
    });

  });

  //Read the image
  picReader.readAsDataURL(file);
}

}); });

2 个答案:

答案 0 :(得分:0)

在大多数情况下,当我们上传图片时,由于其独特性,我们将它们重命名为时间戳。但是对于搜索,处理时间戳要困难得多,然后添加div的类名作为文件名。

var options = {
        host: 'https://###############.herokuapp.com',
        port: 443,
        path: '/parse/functions/'+req.param('text'),
        method: 'POST',
        headers: {
            'X-Parse-Application-Id': '##############',
            'X-Parse-REST-API-Key': '###########'
        }
    };
    https.get(options, function(resp){
      resp.on('data', function(chunk){
        //do something with chunk
        res.send(chunk)
      });
    }).on("error", function(e){
      console.log("Got error: " + e.message);
      res.send(e)
    });

我相信这将是完整的帮助。 感谢

答案 1 :(得分:0)

不确定我是否得到了问题:)

尝试改为:

$(div).attr('id', 'yourIDHere')

或者你永远不会使用你定义的var文件,不是吗?

div.id = file.name;

您可以通过JS生成UUID,请参阅here