[TOC] # input 上传 ~~~ input type="file"> ~~~ <br> <br> # 拖拽 ~~~ <span>文件：</span><span id="dragFile"></span> <div class="drag_area" id="dragArea"> <p>将文件拖拽到这里</p> </div> var dragArea = document.getElementById('dragArea') dragArea.addEventListener('dragover', function (event) { event.preventDefault() }) dragArea.addEventListener('drop', function (event) { event.preventDefault() var dragFile = document.getElementById('dragFile') let file = event.dataTransfer.files[0] if (file) { console.log(file) dragFile.innerText = file.name } }) ~~~ <br> <br> # 粘贴 ~~~ <div class="paste_area" id="pasteArea" contenteditable> <img src="" alt=""> </div> var pasteArea = document.getElementById('pasteArea') pasteArea.addEventListener('paste', function (event) { event.preventDefault() let file = event.clipboardData.files[0] if (file) { console.log(file) this.innerText = file.name } }) ~~~ # 参考资料 [少侠，留步，图片预览术](https://juejin.im/post/5b890c386fb9a019c771713a#heading-7)