jQueryを使用して、1つのDjangoプロジェクトに同様の機能を実装しました。
ユーザーが名刺のロゴを選択すると、ロゴファイルがサーバーに透過的にダウンロードされ、処理されてからブラウザに「与えられ」ます。 ユーザーは、レイアウトでロゴが選択したものに変更されたことを確認します。
実装
ページをロードした後、 LoadLogotype（）関数の定期的な呼び出しが開始されます。
var previous_logo = "";
// ------------------------------------------------ -----------------------------
関数LoadLogotype（）{
var card_logo = $（ "＃card_logo"）。val（）;
if（（card_logo！= ""）&&（previous_logo！= card_logo））{
previous_logo = card_logo;
$（ "＃uploadphoto"）。submit（）;
}
}
// ------------------------------------------------ -----------------------------
$（関数（）{
setInterval（ "LoadLogotype（）"、1000）;
}）;
LoadLogotype（）関数は、ロゴファイルが選択されているか、変更されているかを確認し、変更されている場合、uploadphotoフォームをサーバーに送信します。
フォームにはパラメーターtarget = "upload_frame"があります。つまり、別のページへの移行は開始されません。 すべての変更は、非表示のフレームのみに関係します。 このフレームでフォームを送信すると、サーバーから返された結果がロードされます。
...
form id = "uploadphoto" target = "upload_frame" enctype = "multipart / form-data" action = "/ upload_logo /" method = "post">
ロゴ：/フォーム>
...
iframe id = "upload_frame" name = "upload_frame" style = "display：none">
...
サーバーロゴのアップロード処理機能は、ユーザーフォルダーにファイルを保存します。 また、ダウンロードされたファイルは、allowed_filesリストに従ってチェックされます。これは、ユーザーによる無許可のファイルのダウンロードに対する保護です。
その結果、関数はファイルへのURLを提供します。
＃------------------------------------------------- -----------------------------
def upload_logo（リクエスト）：
「ロゴ画像のアップロードを処理する」
alloved_files =（ '.jpg'、 '.jpeg'、 '.png'、 '.gif'）
id = request.session ['our_id']
パス= settings.MEDIA_ROOT + 'uploads /％s /'％id
os.path.isdir（パス）でない場合：
試してください：
os.makedirs（パス）
を除く：
return "エラー：ファイルをアップロードするディレクトリを作成できませんでした！"
request.FILESのimage_fileの場合：
filename = request.FILES [image_file] ['filename']
名前、ext = os.path.splitext（ファイル名）
extがalloved_filesにない場合：
続ける
ファイル名== ''の場合：
続ける
コンテンツ= request.FILES [image_file] ['content']
f =オープン（パス+ファイル名、「wb」）
試してください：
f.write（コンテンツ）
最後に：
f.close（）
内容= {
「画像」：「/ appmedia / uploads /％s /％s」％（id、filename）、
}
render_to_response（ "done.html"、コンテンツ、context_instance = RequestContext（リクエスト））を返します
done.htmlテンプレートのレンダリング結果は、不可視のIFRAME "upload_frame"に分類されます 。 このスクリプトは、親ドキュメント内でcard_logotype要素を検出し、画像URLをサーバーから指定されたURLに置き換えます。
html>
頭>
スクリプト言語= "JavaScript"タイプ= "text / javascript">
parent.document.getElementById（ 'card_logotype'）。src = "{{image}}"
/スクリプト>
/頭>
ボディ>
/本体>
/ html>
その結果、ユーザーには選択した画像のロゴが変更されます。 ページ全体を更新することなく、プロセス全体が実行されます。 非表示フレームとロゴ画像の内容のみが変更されます。
ここでの仕組みをご覧ください： http : //bicards.pythondevside.com/
元の投稿