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

聊骚

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

准备工作

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

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

新创建一个文件夹,并创建如下几个文件:

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

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

构建简单的页面

先看一下页面:

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

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

贴上html代码:

实现拖拽效果

到了我们的重头戏JavaScript了:

实现的效果如下:

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

添加JavaScript代码,整版如下:

效果如下:

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

前后端交互

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

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

将文件保存至本地

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

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

测试效果

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

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

尝试拖拽上传图片~

成功上传后~

展示一下全套效果~

关注不吃亏

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180805G0QUE300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券