解决：Dropzone.js的图片拖拽上传保存本地文件夹

拖拽上传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是上传的图片的路径

这里是上传的样式

---

总结

完成图片拖拽上传并展示是一个比较完整的前后台交互的过程，在自己摸索的过程中，了解一些前后台交互规则，包括文件存储调用，这些在纯前端是涉及不到的，毕竟纯前端的技能树我不想点，我要点全栈的技能树，虽然道路漫长，但终究耗不过时间，诸位加油。