使用imageUpload（javascript）上传文件，可能很简单

Question

今天我使用一个简单的按钮（id：＆＃34; imageUpload＆＃34;）上传图片以上传文件。 Evthg完美无缺。然后在＆＃34; thumb1＆＃34;中显示图片的拇指。

我想通过点击div＆＃34; preview1＆＃34;来上传图片。

以下是我尝试的代码：

<input type="file" id="imageUpload">

<div class="preview1 slide" onclick="document.getElementById('imageUpload').click();">
    <div id="thumb1" class="thumb"></div>
</div>

和js：

new AjaxUpload('imageUpload', {
    action: "upload",
    name: 'userfile',
    onSubmit : function(file, extension){  
        do some work..  
    },
    onComplete: function(file, response) {
        do some work..
    }
});

结果：

当我点击＆＃34; preview1＆＃34;时，会打开一个窗口来选择文件：OKAY

但是文件没有上传（没有拇指预览），只有文件的名称出现在＆＃34; imageUpload＆＃34;的右边。 ：

有什么想法吗？

Answer 1

如果我理解正确，您希望在文件上传时显示图片缩略图。这可能会对你有所帮助

How to generate a thumbnail image after adding an image inside an input type="file" in a form and submitting them both on the same form

从用户处回收：Che-azeh：

＆＃13;

＆＃13;

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 = "";
  }
}

＆＃13;

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

＆＃13;

＆＃13;

＆＃13;