带图片预览的文件拖拽上传插件DropzoneJS

来源:https://www.sucaihuo.com/js/2861.html 2017-08-28 23:14浏览(1696) 收藏

一款带图片预览的文件拖拽上传插件DropzoneJS,可以拖拽图片文件到指定区域,自动显示图片的缩略图内容,需要设置好form表单的上传路径。
带图片预览的文件拖拽上传插件DropzoneJS
分类:表单代码 > 图片上传 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面所有的CSS样式文件和JS文件,代码如下:

<link type="text/css" rel="stylesheet" href="dist/basic.min.css">
<link type="text/css" rel="stylesheet" href="dist/dropzone.min.css">
<script type="text/javascript" src="dist/dropzone.min.js"></script>
<style type="text/css">
.dropzone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white;
}
</style>

页面的body部分,需设置好上传的form表单,代码如下:

<form action="/upload" class="dropzone needsclick dz-clickable" id="demo-upload">
  <div class="dz-message needsclick">
    Drop files here or click to upload.<br>
    <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
  </div>
</form>
标签: 上传拖拽预览
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2