在BAE搭建的Django中实现图片上传并用jquery预览图片
2013-04-20 15:44
756 查看
文章转载请注明出处!
作者:羽龍飛
原文链接:http://blog.csdn.net/zgyulongfei/article/details/8828008
在BAE上搭建好了django,如何实现图片上传并预览呢?
想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url。可是返回数据的话,网页就会重定向。因此想要在上传页面预览图片,就得采用异步的方式,本文将使用jquery.form.js来实现。具体关于jquery.form.js的文档请参看http://malsup.com/jquery/form/#getting-started
首先,来看一个小例子:
保存为a.html用浏览器打开之后,显示如下:
点击选择文件,选中某个文件之后,可以看到网页显示如下:
其实,我们需要的就是类似的效果实现。选择图片并上传之后,可以在本页看到刚刚上传的图片。
下面就介绍一下如何在BAE搭建django中实现此功能:
首先,在template下写一个uploadPic.html,代码如下:
当点击“上传”按钮之后会去执行 ajaxForm()方法,如果post成功之后会获得服务端返回的数据,并在img中设置src来显示图片。
首先看一下图片上传成功时候显示的页面【图片1】:
再看一下如果上传的文件不是图片时,显示的效果【图片2】:
这里的效果需要在服务端实现,具体服务端的代码可以参考如下:
代码不难理解,不要忘了添加几个包的引用:
这里对几个标记点进行一下说明:
#标记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()函数
以上。
作者:羽龍飛
原文链接:http://blog.csdn.net/zgyulongfei/article/details/8828008
在BAE上搭建好了django,如何实现图片上传并预览呢?
想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url。可是返回数据的话,网页就会重定向。因此想要在上传页面预览图片,就得采用异步的方式,本文将使用jquery.form.js来实现。具体关于jquery.form.js的文档请参看http://malsup.com/jquery/form/#getting-started
首先,来看一个小例子:
<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,代码如下:
<!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】:
这里的效果需要在服务端实现,具体服务端的代码可以参考如下:
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
代码不难理解,不要忘了添加几个包的引用:
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()函数
以上。
相关文章推荐
- 在BAE搭建的Django中实现图片上传并用jquery预览图片
- jQuery实现上传图片前预览效果功能
- jquery实现上传图片及图片大小验证、图片预览效果代码
- jquery 实现上传图片的预览
- jQuery插件imgPreviewQs实现上传图片预览
- jquery实现图片上传前本地预览功能
- JS,jQuery轻松实现input图片上传预览功能
- jQuery实现的上传图片本地预览效果简单示例
- jQuery插件imgPreviewQs实现上传图片预览
- jquery 实现 图片上传 预览
- PHP jQuery实现上传图片时预览图片的功能实例
- jquery实现图片上传之前预览的方法
- jquery实现兼容浏览器的图片上传本地预览功能
- jquery实现上传图片及图片大小验证、图片预览效果代码(借荐,谢谢原作者)
- 使用JQuery上传图片 实现预览
- jquery实现图片上传前本地预览
- jQuery获取上传图片的路径,实现在线预览
- jquery实现上传图片预览(需要浏览器支持html5)
- jQuery + ashx 实现图片按比例预览、异步上传及显示
- 使用jQuery在上传图片之前实现缩略图预览