Skip to content

Instantly share code, notes, and snippets.

@abearxiong
Last active Nov 3, 2019
Embed
What would you like to do?
js文件上传 剪贴板 拖拽 选择
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8">
<!-- Begin styles -->
<link rel="stylesheet" href="./styles/main.min.css" type="text/css">
<!-- End styles -->
<!-- inject:css -->
<!-- endinject -->
<title>图片上传</title>
</head>
<body>
<div id="develop">
<h3>剪贴板图片</h3>
<details>
<summary>剪贴板图片</summary>
复制了图片后,在浏览器中ctrl+v即可,默认在末尾追加一个图片
</details>
<h3>拖动文件</h3>
<details>
<summary>原生拖动上传</summary>
<blockquote>没有考虑浏览器的兼容性问题。chrome,firfox,edge没问题</blockquote>
<div id="drop-upload">
</div>
<div id="drop-preview">
</div>
</details>
<details>
<summary>JQuery拖动上传(无)</summary>
<div id="jquery-drop-upload">
</div>
<div id="jquery-drop-preview">
</div>
</details>
<h3>表单上传</h3>
<details>
<summary>表单上传</summary>
<from>
<input id="from-drop-upload" type="file" multiple onchange="formPreview(this.files)"/>
<div id="from-drop-preview">
</div>
</from>
如果multiple就是可以多文件上传
</details>
<h3>非开发内容</h3>
<details>
<summary>edge不支持details</summary>
edge的details和summary不和其他浏览器一样,edge不支持。
</details>
</div>
<!-- Begin scripts -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./scripts/main.min.js" charset="utf-8"></script>
<!-- End Scripts -->
<!-- inject:js -->
<!-- endinject -->
<script>
</script>
</body>
</html>
"use strict";console.log("app.js");
"use strict";var dropUpload=document.querySelector("#drop-upload"),dropPreview=document.querySelector("#drop-preview");dropUpload.addEventListener("drop",function(e){e.preventDefault(),e.stopPropagation(),console.log(event,"event",this.files," e.dataTransfer.files",e.dataTransfer.files);var r=this.files||e.dataTransfer.files;if(0==r.length)return alert("非拖动文件到页面"),!1;if(-1===r[0].type.indexOf("image"))return alert("托的不是图片"),!1;var t=window.webkitURL.createObjectURL(r[0]),a=r[0].name,o=Math.floor(r[0].size/1024);if(500<o)return alert("上传大小不能超过500k"),!1;dropPreview.append(t,"标题",a," 大小:"+o);var n=document.createElement("img");n.src=t,dropPreview.appendChild(n)},!1),dropUpload.addEventListener("dragenter",function(e){e.preventDefault(),e.stopPropagation()}),dropUpload.addEventListener("dragover",function(e){e.preventDefault(),e.stopPropagation()});
"use strict";var fromDropUpload=document.querySelector("#from-drop-upload"),fromDropPreview=document.querySelector("#from-drop-preview");function formPreview(e){if(e.length){fromDropPreview.innerHTML="";var r=document.createElement("ul");fromDropPreview.appendChild(r);for(var o=0;o<e.length;o++){var n=document.createElement("li");r.appendChild(n);var t=document.createElement("img");t.src=window.URL.createObjectURL(e[o]),t.height=60,t.onload=function(){window.URL.revokeObjectURL(this.src)},n.appendChild(t);var i=document.createElement("span");i.innerHTML=e[o].name+": "+Math.round(e[o].size/1024)+" k",n.appendChild(i)}}else fromDropPreview.innerHTML="<p>No files selected!</p>"}
"use strict";var jqueryDropUpload=$("#jquery-drop-upload"),jqueryDropPreview=$("#jquery-drop-preview");
"use strict";document.addEventListener("paste",function(e){var t=e.clipboardData.items,a=null;if(0<t.length&&"file"==t[0].kind&&("image/jpeg"==(a=t[0].getAsFile()).type||"image/png"==a.type)){var n=new FileReader;n.readAsDataURL(a),n.addEventListener("load",function(e){var t=document.createElement("img");t.src=e.target.result,document.body.appendChild(t)})}});
#develop{width:80%;margin:auto}#drop-upload,#jquery-drop-upload{width:200px;height:200px;background-color:#faebd7}
// 给 document 添加 paste 事件
document.addEventListener('paste', ev => {
const items = ev.clipboardData.items; // 获取剪贴板中的数据
let files = null; // 用来保存 files 对象
if (items.length > 0) {
// 判断剪贴板中是否是文件
if (items[0].kind == "file") {
files = items[0].getAsFile(); // 获取文件
// 判断是否是图片
if (files.type == 'image/jpeg' || files.type == 'image/png') {
const reader = new FileReader(); // 创建 FileReader 对象
reader.readAsDataURL(files); // 读取文件
// 读取完成后触发
reader.addEventListener('load', ev => {
const img = document.createElement('img'); // 创建 img 标签
img.src = ev.target.result; // 设置 img 的 src
document.body.appendChild(img); // 把创建的 img 插入到 body 中
});
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment