解决: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是上传的图片的路径

这里是上传的样式

这里写图片描述


总结

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值