在BAE搭建的Django中实现图片上传并用jquery预览图片

最新推荐文章于 2024-01-26 10:31:58 发布

c2a2o2

最新推荐文章于 2024-01-26 10:31:58 发布

阅读量503

点赞数

分类专栏：图像特征 python

图像特征同时被 2 个专栏收录

123 篇文章

订阅专栏

python

33 篇文章

订阅专栏

在BAE上搭建好了django，如何实现图片上传并预览呢？

想要实现图片上传并不难，但是想看到刚上传的图片，就得在服务器返回上传后图片的url。可是返回数据的话，网页就会重定向。因此想要在上传页面预览图片，就得采用异步的方式，本文将使用jQuery.form.js来实现。具体关于jquery.form.js的文档请参看http://malsup.com/jquery/form/#getting-started

首先，来看一个小例子：

[html]view plaincopy 
   
 <html>  
       
     <head>  
         <title>  
             upload  
         </title>  
         <script type="text/javascript">  
             function checkFile() {  
                 document.getElementById("test").src = "http://apps.bdimg.com/developer/static/04192014/developer/images/logo.png"  
             }  
         </script>  
     </head>  
       
     <body>  
         <input onchange="checkFile();" type="file" />  
         <br/>  
         <img id="test" src="" width="277" height="46">  
     </body>  
   
 </html>  

保存为a.html用浏览器打开之后，显示如下：

点击选择文件，选中某个文件之后，可以看到网页显示如下：

其实，我们需要的就是类似的效果实现。选择图片并上传之后，可以在本页看到刚刚上传的图片。

下面就介绍一下如何在BAE搭建django中实现此功能：

首先，在template下写一个uploadPic.html，代码如下：

[html]view plaincopy 
   
 <!DOCTYPE>  
 <html lang="zh-CN">  
       
     <head>  
         <meta charset="utf-8">  
         <title>  
             上传图片  
         </title>  
   
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">  
         </script>  
         <script src="http://malsup.github.com/jquery.form.js">  
         </script>  
   
         <script type="text/javascript">  
             (function() {  
   
                 $('#myform').ajaxForm({  
                     success: function(data) {  
                         var img = document.getElementById("preview_img");  
                         img.src = data.imgurl;     
                         img.style.display = 'block';  
                     }   
                 });  
   
             })();  
         </script>  
   
         <style>  
             .Image {  
                 max-width:600px;height:auto;cursor:pointer;  
                     border:1px dashed #4E6973;padding: 3px;  
                     }  
         </style>   
     </head>  
       
     <body>  
         <form id="myform" action="/upload/uploadPic" method="post" enctype="multipart/form-data">  
             <!-- {% csrf_token %} -->  
             <input type="file" name="photo" id="image_upload" />  
             <br>  
             <input type="submit" value="上传" />  
         </form>  
         <img id="preview_img" src="" width="300" height="200" class="Image" style="display:none">  
     </body>  
   
 </html>  

当点击“上传”按钮之后会去执行 ajaxForm()方法，如果post成功之后会获得服务端返回的数据，并在img中设置src来显示图片。

首先看一下图片上传成功时候显示的页面【图片1】：

再看一下如果上传的文件不是图片时，显示的效果【图片2】：

这里的效果需要在服务端实现，具体服务端的代码可以参考如下：

[python]view plaincopy 
   
 def uploadPic(rq):  
     file = rq.FILES['photo']  
     oldFileName = file.name  
     fileExt = oldFileName.split('.')[-1]  
     if fileExt != 'jpg' and fileExt != 'jpeg' and fileExt != 'png':  #标记1  
         response = HttpResponse()  
         response['Content-Type'] = "application/json"  
         imgurl = "http://bcs.duapp.com/mybucket/image/error_upload.jpg"  
         json = "{\"status\":\"fail\", \"imgurl\":\"" + imgurl + "\"}"  #标记2  
         response.write(json)  
         return response  
   
     HOST = 'http://bcs.duapp.com/'  
     AK = 'xxxxxx'            
     SK = 'xxxxxx'             
     bbcs = bcs.BaeBCS(HOST, AK, SK)   #标记3  
       
     bucketName = "mybucket"  
     saveFileName = str('/upload/'  + oldFileName) #标记4  
     saveFileData = file.read()  
   
     bbcs.put_object(bucketName, saveFileName, saveFileData)  
       
     response = HttpResponse()  
     response['Content-Type'] = "application/json"  
     imgurl = "http://bcs.duapp.com/mybucket"+ saveFileName  
     json = "{\"status\":\"success\", \"imgurl\":\"" + imgurl + "\"}"  
     response.write(json)  
     return response  

代码不难理解，不要忘了添加几个包的引用：

[python]view plaincopy 
   
 from bae.api import bcs   
 from django.http import HttpResponse  

这里对几个标记点进行一下说明：

#标记1：对上传的文件类型进行判断，因为只做图片上传，所以得判断当前文件是否为图片，如果不为图片则返回上面的【图片2】。

#标记2：返回的json需要用转义字符 \" 来代替json的 ' 和 "，如果定义的json={'status':'fail', 'imgurl':'http://xx.xx.xx/xx.jpg'}，这种方式返回的是json数据，页面会进行重定向，ajaxForm中的success方法就不执行。

#标记3：当你在百度云存储创建一个bucket之后，会获得该bucket的ACCESS_KEY和SECRET_KEY，开发指南参看：http://developer.baidu.com/wiki/index.php?title=docs/cplat/stor/guide ，django在BAE上要进行文件上传，保存的地方在百度云存储，具体百度云存储的API请参看：http://pythondoc.duapp.com/bcs.html

#标记4：因为oldFileName=rq.FILES['photo'].name这种方式获得的字符串为unicode，得进行格式转换，所以用了str()函数