小白录屏怎么自动上传到微信

1.可以直接将手机与电脑连接，然后找到录屏文件所在文件夹，点击拖拽对应文件到微信信息框，点击发送即可。

2.点击小白录屏文件“列表”图标，然后点击“…”下的文件位置图标，从中找到对应的录屏文件，点击复制到微信消息框粘贴即可。

3.手机端小白录屏发布朋友圈，点击朋友圈“+”号，选择加入图片，然后从中找到录屏的文件上传就行了。

目前用户要通过Web上传一个文件是通过 <input type="file /">这个标记。具体过程需要在一个很傻的对话框里定位文件夹 ->在大量的文件里找到目标文件 ->确定 ->点“上传”按钮。我们能不能把这个步骤简化，实现拖拽上传呢？

比如说，

1. 在 资源管理器 里选择一个图片

2. 拖拽到一个网页，比如说一个正在编辑的博客

3. 后台AJXJ自动上传这个图片

4. 在正在编辑的博客的当前位置直接插入并显示图片。

我想用javascript实现。（跟AJAX一样，有一点hack的味道。）

原理很简单。首先用户拖拽一个图片到浏览器，浏览器会自动跳转到这个图片。比如说我拖拽 D:\test\1.jpg 到浏览器，浏览器会跳转当前页面到 file:///D:/test/1.jpg。那么我们要做的就是在浏览器跳转之前：

1. 截获body.onunload事件，并取消浏览器的跳转

2. 获知浏览器将要跳转到的页面

3. 自动填写 <input type="file" />的地址

4. AJAX后台上传图片

5. 把图片插入当前的正在编辑位置。

发这个帖子的目的，想跟大家探讨这个设想的可能性。最后希望得出一个结论：可行，还是不可行。如果可行的话我希望深入探讨出一个固定的模式。（像AJAX那样）

通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从 *** 作系统直接拖拽文件，并上传到服务器。

相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS（内容管理系统）也将会从中受益。

让我们看一下Firefox 是如何使用拖拽上传功能的：

首先提供一个区域来放置文件

Html代码

1

<div name="image" id="dropbox" style="min-width:300pxmin-height:100pxborder:3px dashed silver"></div>

然后监听拖拽过程中的dragenter、dragleave、drop等事件

Js代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

document.addEventListener("dragenter", function(e){

dropbox.style.borderColor = 'gray'

}, false)

document.addEventListener("dragleave", function(e){

dropbox.style.borderColor = 'silver'

}, false)

dropbox.addEventListener("dragenter", function(e){

dropbox.style.borderColor = 'gray'

dropbox.style.backgroundColor = 'white'

}, false)

dropbox.addEventListener("dragleave", function(e){

dropbox.style.backgroundColor = 'transparent'

}, false)

dropbox.addEventListener("dragenter", function(e){

e.stopPropagation()

e.preventDefault()

}, false)

dropbox.addEventListener("dragover", function(e){

e.stopPropagation()

e.preventDefault()

}, false)

dropbox.addEventListener("drop", function(e){

e.stopPropagation()

e.preventDefault()

handleFiles(e.dataTransfer.files)

submit.disabled = false

}, false)

其中最主要的是drop事件中用handleFiles()依次处理所有文件

1

2

3

4

5

6

handleFiles = function(files) {

for (var i = 0i <files.lengthi++) {

var file = files[i]

}

}

对于图片类型的文件可以直接读取内容，显示预览图

1

2

3

4

5

6

7

8

9

10

11

12

if (!file.type.match(/image*/)) {

continue

}

var img = document.createElement("img")

img.classList.add("obj")

img.file = file

preview.appendChild(img)

var reader = new FileReader()

reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result}})(img)

reader.readAsDataURL(file)

接下来就是核心功能：ajax上传。首先新建一个XHR请求

1

2

var xhr = new XMLHttpRequest()

xhr.open('post', '/file/upload', true)

监听上传进度和完成事件

1

2

3

4

5

6

7

8

9

10

xhr.upload.addEventListener("progress", function(e) {

if (e.lengthComputable) {

var percentage = Math.round((e.loaded * 100) / e.total)

img.style.opacity = 1-percentage/100.0

}

}, false)

xhr.upload.addEventListener("load", function(e){

}, false)

最后把数据模拟成multipart/form-data的格式上传

1

2

3

4

5

6

7

8

9

10

11

xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary)// simulate a file MIME POST request.

xhr.setRequestHeader("Content-Length", fileSize)

var body = ''

body += "--" + boundary + "\r\n"

body += "Content-Disposition: form-dataname=\""+dropbox.getAttribute('name')+"\"filename=\"" + fileName + "\"\r\n"

body += "Content-Type: "+fileType+"\r\n\r\n"

body += fileData + "\r\n"

body += "--" + boundary + "--\r\n"

xhr.sendAsBinary(body)

---