解决：Dropzone.js的图片拖拽上传保存本地文件夹
2017-04-17 本文已影响526人
mrlevo520
拖拽上传JS包：Dropzone.js
图片展示JS包：PhotoSwipe.js
Mac OS：Sierra 10.12.2
python 2.7
Django 1.6
前言
在学习前端的时候需要用到图片拖拽上传展示，这里记录一下踩过的坑以及解决办法
目的
图片拖拽或点击上传，在另一个页面根据数据库id索引调出图片
图片拖拽上传部分
- 先说一下具体的流程，调用dropzong.js包，进行图片拖拽实现，但是这里只是前端页面的使用，数据提交到后台的逻辑是没有的，需要自己写，其实就是处理表单的方式一致，和input的type="file"的形式一致，接受数据，从前端传递过来的数据到后台开始处理，使用的get的方法，把前端输入的order_id和img存储起来，order_id存储的是字符串，而img存储的是路径。这里要注意的是，对于form表单，需要属性为post和enctype="multipart/form-data"。而图片的保存本地使用的是文件写入的形式，具体的可以看request的使用
html
<!-- 图片拖拽 -->
<script src="/media/js/dropZone/lib/dropzone.js"></script>
<link rel="stylesheet" href="/media/js/dropZone/downloads/css/dropzone.css">
<div class="site-text site-block" style="border-radius: 8px;float:left;width:525px;height:500px; margin-right:25px;border:3px;margin-left: 3%;margin-top: 3%">
<!-- 取消按钮但是目前只能删除图却无法进行从数据库方面的删除 -->
<form id="dropz" width="100px" height="150px" class="dropzone" enctype="multipart/form-data" style="height:400px;width: 520px">{% csrf_token %}
<div style="margin-left: 20%;">
<input type="" name="order_id" style="width:280px;border:1px solid #FF8C00 ;" placeholder="请先输入对应订单号(必填),再拖拽图片">
</div>
</form>
</div>
<!-- 图片拖拽 -->
- dropzone.js的方式可以使用form表单进行提交，现在有个小问题就是，表单不用提交，如果有order_id了(可以看view.py中的逻辑)，拖拽图片直接就保存到数据库上了，删目前删不了，刚学两礼拜，还没搞明白，下次补充。
js部分
<script>
$("#dropz").dropzone({
url: "/enter/upload",
addRemoveLinks: true,
dictRemoveLinks: "Remove File",
dictCancelUpload: "Cancel Upload",
maxFiles: 5,
maxFilesize: 10,
autoProcessQueue: true,
acceptedFiles: ".jpg,.png,.jpeg",
init: function() {
this.on("success", function(file) {
console.log("File " + file.name + "uploaded");
});
this.on("removedfile", function(file) {
console.log("File " + file.name + "removed");
});
}
});
</script>
- js部分是一些配置项，比如包括文件上传最大个数，最大尺寸(mb),是否有删除选项，这些都在官网里面有，想看的直接看这里官方文档
models.py
# 建立用于存放图片编号和路径的数据库
class img(models.Model):
order_id= models.CharField(max_length=128,null=True)
img = models.ImageField(upload_to='upload')
- model部分注意ImageField类型的定义，upload_to='upload'是指上传到当前路径下的upload文件夹，保险起见，先自己创建文件夹吧
view.py
def case_enter(request):
order_id=request.POST.get('order_id')
img2 = request.FILES.get('file')
if request.method == 'POST' and (len(str(order_id)) > 0):
#print "is POST"
imgpath = 'upload/'+str(time.time())+str(img2) # 名字独特性使用时间戳添加名字
#print imgpath
fp = open("ams/media/upload/%s"%(imgpath.split("/")[-1]),'wb')
s = img2.read()
fp.write(s)
fp.close()
time.sleep(1)
conn= MySQLdb.connect(
host='你的数据库host',
port = 8000,
user='root',
passwd='数据库密码',
db ='数据库名字',
)
cur = conn.cursor()
conn.set_character_set('utf8')
cur.execute('SET NAMES utf8;')
cur.execute('SET CHARACTER SET utf8;')
cur.execute('SET character_set_connection=utf8;')
try:
sqlregisters = "insert into enter_img(order_id,img) value(%s,%s)"
cur.execute(sqlregisters,(order_id,imgpath))
except:
print "order_id is none or '' "
finally:
conn.commit()
conn.close()
return render(request, 'case_enter.html')
值得注意的是图片的保存，这里保存在数据库中的形式是保存路径！！！而实际上的图片是以二进制的形式写入到文件夹中的，之后的图片展示是根据数据库索引，然后调出对应图片路径，然后再展示在前端
- view中的逻辑无非是get到前台传回的数据，然后保存起来，这里用到了MySQLdb的包，注意事先安装，然后就是一系列的sql语句的使用了，注意需要commit进行提交。
urls.py
urlpatterns = patterns('enter.views',
url(r'^upload', 'case_enter'),
)
- 注意这里的映射关系，是指，页面提交到upload的时候(网页有前缀，具体看自己的app)，然后执行view的case_enter方法！
数据库
+-----+----------+-------------------------------------+
| id | order_id | img |
+-----+----------+-------------------------------------+
| 460 | 1234 | upload/1491036872.27WechatIMG2.png |
+-----+----------+-------------------------------------+
- 这里id自增，没关系，我测试比较多了，重点看第二列是关联的订单号，之后的img是上传的图片的路径
这里是上传的样式
这里写图片描述
总结
完成图片拖拽上传并展示是一个比较完整的前后台交互的过程，在自己摸索的过程中，了解一些前后台交互规则，包括文件存储调用，这些在纯前端是涉及不到的，毕竟纯前端的技能树我不想点，我要点全栈的技能树，虽然道路漫长，但终究耗不过时间，诸位加油。
