在BAE搭建的Django中实现图片上传并用jquery预览图片
2017-05-09 15:21
671 查看
在BAE上搭建好了django，如何实现图片上传并预览呢？
想要实现图片上传并不难，但是想看到刚上传的图片，就得在服务器返回上传后图片的url。可是返回数据的话，网页就会重定向。因此想要在上传页面预览图片，就得采用异步的方式，本文将使用jQuery.form.js来实现。具体关于jquery.form.js的文档请参看http://malsup.com/jquery/form/#getting-started
首先，来看一个小例子：
[html] view
plain copy
<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
plain copy
<!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
plain copy
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
plain copy
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()函数
想要实现图片上传并不难，但是想看到刚上传的图片，就得在服务器返回上传后图片的url。可是返回数据的话，网页就会重定向。因此想要在上传页面预览图片，就得采用异步的方式，本文将使用jQuery.form.js来实现。具体关于jquery.form.js的文档请参看http://malsup.com/jquery/form/#getting-started
首先，来看一个小例子：
[html] view
plain copy
<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
plain copy
<!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
plain copy
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
plain copy
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.uploadify插件实现图片上传和预览效果
- jquery实现兼容浏览器的图片上传本地预览功能
- jquery实现兼容浏览器的图片上传本地预览功能
- jquery.form.js实现图片上传后预览
- 使用jQuery在上传图片之前实现缩略图预览
- jquery扩展html5+canvas实现多张图片 预览 压缩 上传
- 利用jquery，html5实现图片预览实时上传
- jQuery 实现 图片上传预览
- jquery实现上传图片及图片大小验证、图片预览效果代码(借荐，谢谢原作者)
- jquery.uploadify插件实现图片上传和预览效果
- jquery 实现上传图片的预览
- jquery实现图片上传时预览
- jquery.uploadify插件实现图片上传和预览效果
- jQuery + ashx 实现图片按比例预览、异步上传及显示
- jquery实现上传图片预览(需要浏览器支持html5)
- 利用jquery.uploadify插件来实现图片上传和预览效果
- jquery实现图片上传之前预览的方法