实现简易的图片拖拽上传功能

聊骚

看了一下上次写推文的日期，嗯~已经咸鱼十几天了。今天将功补过，于是花了半个多小时实现了这个小demo，让你学会如何实现一个完整的图片拖拽上传功能！

准备工作

想要实现这个功能，肯定免不了后台，而我所使用的后台语言是node.js。其他语言即可。

如果同样想使用node.js搭建一个服务器的小伙伴，需要去安装并配置node的环境。

新创建一个文件夹，并创建如下几个文件：

三个文件从上到下分别是：用于存放上传后的图片、用于写前端页面及相应业务、用于搭建node服务器~

好了，准备开始敲代码啦~

构建简单的页面

先看一下页面：

还有比这更简单的不！！！

贴上最容易理解的css代码：

贴上html代码：

实现拖拽效果

到了我们的重头戏JavaScript了：

实现的效果如下：

当然不仅仅是拖动图片，我们还要把图片放在浏览器上！

添加JavaScript代码，整版如下：

效果如下：

完成这些效果之后，我们就要开始进行前后端数据交互啦！！

前后端交互

现在，我们只需要在原有的JavaScript代码上增加代码，整版如下：

现在我们的前端页面已经写完了，要着手于后台啦~

将文件保存至本地

让我们打开文件server.js，并写入如下代码：

下面我们来试一下成果吧！

测试效果

打开cmd，定位到你的server.js所在目录，并通过node运行服务器脚本：

访问：http://localhost:8888/index

尝试拖拽上传图片~

成功上传后~

展示一下全套效果~

关注不吃亏

写这篇推文所花的时间是我做这个demo的两倍多，怎么还有理由不关注一波呢