上传的图片无法在Firefox,iphone Safari,谷歌浏览器中正确显示,但可以在Internet Explorer中使用

时间:2013-01-28 07:20:17

标签: django google-app-engine jinja2 blobstore

我正在关注this Google tutorial上传并显示图片。 我的测试网站是http://dnk-test1.appspot.com/testfile 一切正常,只有当我点击图片名称,Firefox,iphone safari,google chrome浏览器时才会写出奇怪的字符,如

����JFIF��XExifMM*�i&�� ����C     ��C��� "�� ���}!1AQa"q2���#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������� ���w!1AQaq"2�B���� #3R�br� $4�%�

点击查看 - >字符编码并选择任何编码,图像显示正确。

但是,在IE上,图像显示正确。

我正在使用 Firefox 18.0.1 IE 10

更新1:在localhost上,图像可以正确显示所有类型的浏览器。

更新2:添加了Blob Viewer的屏幕截图 enter image description here

更新3:添加代码

views.py

class UploadHandler(blobstore_handlers.BlobstoreUploadHandler):
    def post(self):
        # アップロードされたファイルの情報を取得
        files = self.get_uploads('file')
        blob_info = files[0]

        # redirect メソッドが上手く動かないので、ステータスコードとヘッダを使って
        # ブラウザにリダイレクトを指示
        headers = dict(Location=utils.url_for('myapp/serve', blob_key=blob_info.key()))
        return werkzeug.Response(None, headers=headers, status=302)


class ServeHandler(blobstore_handlers.BlobstoreDownloadHandler):
    def get(self, blob_key):
        blob_key = str(urllib.unquote(blob_key))
        blob_info = blobstore.BlobInfo.get(blob_key)
        return self.send_blob(blob_info)

def testfile(request):
    # アップロード用の URL を作成
    # アップロードに成功したら core/upload エンドポイントへ移動させる
    upload_url = blobstore.create_upload_url(utils.url_for('myapp/upload'))

    # Blobstore に保存されているファイルをすべて取得
    files = blobstore.BlobInfo.all()

    # テンプレートを使って表示
    data = dict(
            upload_url=upload_url,
            files=files)
    return utils.render_to_response('myapp/testfile.html', data)

urls.py

Rule('/testfile', endpoint='testtile', view='myapp.views.testfile'),
    Rule('/upload', endpoint='upload', view=('myapp.views.UploadHandler', (), {})),
    Rule('/serve/<blob_key>', endpoint='serve', view=('myapp.views.ServeHandler', (), {})), 

testfile.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Top Page - core</title>
    </head>
    <body>
        <form action="{{ upload_url }}" method="POST" enctype="multipart/form-data">
            Upload File:<input type="file" name="file"><br>
            <input type="submit" name="submit" value="Submit">
        </form>

        <h2>Uploaded Files</h2>
        <ul>
            {% for file in files %}
            <li><a href="{{ url_for('myapp/serve', blob_key=file.key()     ) }}">{{ file.filename }}</a></li>
            {% endfor %}
        </ul>
    </body>
</html>

更新4:我找到this page,上传图片并正确显示缩略图,正常图像无法正确显示。不同之处在于,当显示缩略图图像时,使用mimetype='image/jpg'。因此,我想我需要将此代码添加到某个地方,但我不知道在哪里。

1 个答案:

答案 0 :(得分:1)

class ServeHandler(blobstore_handlers.BlobstoreDownloadHandler):
    def get(self, blob_key):
        blob_key = str(urllib.unquote(blob_key))
        blob_info = blobstore.BlobInfo.get(blob_key)
        return self.send_blob(blob_info)

应该改为

class ServeHandler(blobstore_handlers.BlobstoreDownloadHandler):
    def get(self, blob_key):
        blob_key = str(urllib.unquote(blob_key))
        blob_info = blobstore.BlobInfo.get(blob_key)
        return self.send_blob(blob_info,'image/jpg')