在BAE搭建的Django中实现图片上传并用jquery预览图片
在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预览图片相关推荐
- java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览 图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
- iOS学习:调用相机,选择图片上传,带预览功能
iOS学习:调用相机,选择图片上传,带预览功能 发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏 赞3 8月22日珠海 OSC ...
- 2016/4/19 ①单个文件上传 ②上传图片后 预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
- jquery插件:图片上传按比例预览
js部分是这样的: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:id ...
- 使用FormData格式上传图像并预览图片
前言 做项目时,遇到表单中图像需要跟表单一起提交,这样会造成后台没办法接收到图片.后面上网调查后,明白表单提交时是默认application/x-www-form-urlencoded格式,只接受键值 ...
- 图片上传并且支持预览
首先这里先讲一个比较low的 <input type="file" id="file1" οnchange="preview1()"/ ...
- 微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
标题 微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件 图片上传功能作为一个比较常见的功能,有时候需要在微信内置浏览器里打开,但是有些型号的手机会出现打不开的现象,点击 ...
- 小红书图片剪裁框架+微信图片选择器+超高清大图预览+图片自定义比例剪裁,支持 UI 自定义、支持跨进程回调
YImagePicker 项目地址:yangpeixing/YImagePicker 简介: 小红书图片剪裁框架+微信图片选择器+超高清大图预览+图片自定义比例剪裁,支持 UI 自定义.支持跨进程回调 ...
最新文章
- vue 输入框限制3位小数_vue+element 中 el-input框 限制 只能输入数字及几位小数(自定义)和输入框之键盘...
- Spring中AOP的两种代理方式(Java动态代理和CGLIB代理)
- 统计信号处理_声学前端:深度学习算法和传统信号处理方法各有千秋
- extjs 按钮小箭头展开panel_汽车按钮都是英文看不懂?视频教你认清车内所有按钮,看完秒懂...
- [轉]Exploit Linux Kernel Slub Overflow
- android设置密码框,Android手机卫士之设置密码对话框
- [Git]4.1 分支与合并
- pytorch学习笔记(二):自动求梯度
- matlab的和操作
- 2012年最佳30款免费 WordPress 主题
- mysql之批量删除
- 去掉Eclipse打开后定期弹出Usage Data Upload对话框
- C#使用PDF控件打开PDF
- 20个免费和高质量的Android图标集—最佳
- Wordpress中wp-admim管理后台(404)无法进入,无限循环跳出解决方法
- 计算机报名照片最小像素高宽,网上报名照片如何确定大小
- Win10重装后无法激活问题解决办法
- google android win10 ios,Flutter入门安装 ,win10 Android studio 教程
- quartus ii 增量编译
- 电商那些年,我摸爬打滚出的高并发架构实战精髓(2017-03-27 YYQ DBAplus社群)
热门文章
- google python代码规范_如何用好python编码规范,写一手漂亮的代码
- php 代码规范 工具,PHP工具篇:PHPStorm IDE使用CodeSniffer代码规范化管理
- 运行shell脚本时怎么知道jdk路径_Linux中如何查询运行文件的全路径的方法
- 【c语言】hello
- mysql经纬度转距离_Mysql 拿指定经纬度与数据库多条经纬度进行距离计算 (转)
- Rider 2018.3.4 发布,跨平台 .NET IDE
- tensorflow2:tf.app.run()
- linux命令:groupadd
- 前端每周清单第 33 期:React 16 发布与特性介绍,Expo AR 教程,ExtJS 从崛起到沉寂...
- MyEclipse图表工具Birt的使用技巧(三)--连接webservice数据源