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

Question

今天，我使用一个简单的按钮（id：“ imageUpload”）上传图片来上传文件。 Evthg工作完美。 然后在“ thumb1”中可以看到图片的缩略图。

我也想通过单击div“ preview1”上传图片。

这是我尝试的代码：

<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..
    }
});

结果：

当我单击“ preview1”时，打开一个窗口来选择文件：OKAY

但随后该文件未上传（没有缩略图预览），并且仅文件名显示在“ imageUpload”的右侧：

任何想法 ？

Answer 1

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

在表单中的输入type =“ file”中添加图像并将它们都提交到同一表单后，如何生成缩略图图像

从用户：Che-azeh回收：

 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="200" alt="Image preview...">