如何在Jquery中将上传的文档显示为缩略图

时间:2016-12-28 10:48:24

标签: jquery jquery-ui

我上传了一些文件然后在提交后我正在拨打一些服务, 然后我在响应中以某些URL的形式获取这些文档,如下所示,

{
"documents": [{
    "contentURL": "http://someexample1url",
    "format": "xls",
    "createdt": "12/27/2016"
}, {
    "contentURL": "http://someexample2url",
    "format": "doc",
    "createdt": "12/27/2016"
}, {
    "contentURL": "http://someexample2url",
    "format": "doc",
    "createdt": "12/27/2016"
}]
}

以下是我的Jquery代码,

function handleFileSelect(documents) {
    var files = documents[0].contentURL;
    var f = files;
    var reader = new FileReader();

      reader.onload = (function(files) {
            return function(e) {
              $("#some_id").html('<img src='+files+' width="50"/>');
            }
      })(f);

      reader.readAsDataURL(f);
   }

我不知道我哪里出错了,发现有点难以弄明白。 请帮助我。不同的想法也会帮助我。

2 个答案:

答案 0 :(得分:0)

You have to remove double quotes from files variables

   function handleFileSelect(documents) {
            var files = documents[0].contentURL;
            var f = files;
            var reader = new FileReader();

              reader.onload = (function(files) {
                    return function(e) {
                      $("#some_id").html('<img src='+files+' width="50" >');
                    }
              })(f);

              reader.readAsDataURL(f);
           }

答案 1 :(得分:0)

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
<input type="file" onchange="previewFile()"><br>
<img src="" height="50" alt="">