abearxiong/index.html

## index.html
<!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>

## main.min.js
"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)})}});

## min.min.css
#develop{width:80%;margin:auto}#drop-upload,#jquery-drop-upload{width:200px;height:200px;background-color:#faebd7}

## paster.js
//  给 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 中
                });
            }
        }
    }
});
	<!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)})}});
	// 给 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 中
	});
	}
	}
	}
	});