最近、私は削除することができますアップロードすると、マルチマップをプレビューすることができ、プロジェクトのニーズに出くわしました
フロントエンドlayui
はじめにスクリプト
<リンクのrel = "スタイルシート" のhref = "/静的/ layui / CSS / layui.css">
<スクリプトSRC = "/静的/ layui / layui.js"> </ SCRIPT>
<スクリプトSRC = "/静的/ JS / jqueryの-1.8.2.min.js"> </ SCRIPT> <！ - layui之外JS - >
フロントエンドコード
{％csrf_token％}
<div>
<スパン>写真：</ span>の
<ボタンタイプ= "ボタン" クラス= "layui-BTN" ID = "TEST1">
<Iクラス= "layuiアイコン">＆＃のxe67c; </ i>の写真
</ button>の
<DIV CLASS = "layuiアップロードリスト"> </ div>
<input type = "提出" ID = "ABC" クラス= "layui-BTN layui-BTN半径layui-BTN正常" スタイル= "フォントサイズ：25ピクセル;" 値=下一步>
</ div>
<スクリプト>
layui.use（[ 'アップロード'、 'jqueryの']、関数（）{
アップロード= layui.uploadました。
$ = layui.jqueryました。
//例を実行します
{（uploadInst = upload.renderました
elemは： '＃test1に'、//バインディング要素
複数：真、
方法： 'POST'、
オート：偽のは、//自動アップロードを無効にします
データ：{
「Csrfmiddlewaretoken」：関数（）{// POSTを検証する認証方法の必要性を取得します
リターン$（ '：入力：最初の'）。valを（）
}
}、
acceptMime： '画像/ *'、
bindAction： "#abc"、//バインドアップロード
URL： "{％のurl '証明' ％}"、//アップロードインタフェース
選択：{OBJパラメータ情報//機能（OBJ）を含有していた、コールバックが正確に選択して
//選択した各ファイルは、ファイルキューに追加されます
ファイル= obj.pushFile（）;
//layer.load（）; //アップロードされたロード
obj.preview（関数（インデックスファイル、結果）{
。$（」。layuiアップロードリスト "）APPEND（ '<IMG SRC ="' +結果+ ' "ID =" remove_' +インデックス+「 "タイトル= "双击删除该图片" スタイル=" 幅：200pxの;高さ：自動; "> '）
$（ '＃Remove_' +インデックス）は、削除あらかじめ指定されたアップロードの写真に（ 'DBLCLICK'、機能（）{//ダブルクリックし.bind
削除ファイル[インデックス]; //が指定された画像を削除します
$（この）.remove（）;
}）
//console.log(1、インデックス）; //ファイルのインデックスを取得します
//console.log(2、file.name）; //ファイルオブジェクトを取得
//console.log(3、結果）; //画像などのget base64でエンコードされたファイル、
}）
}、
行う：機能（RES）{
// IMGS = imgs.concat（res.Data）
//console.log(imgs）
IF（res.code == 0）{
layer.msg（ "イメージが正常にアップロード！"、{アイコン：1、時間：1000}
//,function(){setTimeout('window.location.reload()',1000）;} //成功した後、ページを更新してアップロード
// window.location.href = "{：URL（ 'テスト/インデックス'）}" アップロードが成功した後、//指定されたページにジャンプ
）;} //コールバックのアップロード
}、
エラー：関数（）{
//例外コールバック要求
}
}）;
}）;
</ SCRIPT>
バックステージビュー
輸入JSON
django.http輸入JsonResponseから
デフ（リクエスト）証明：
request.method == 'GET' の場合：
（ '最初/ proved.html'、要求）をレンダリング返します
request.method == 'POST' の場合：
com_from = request.META.get（ "HTTP_REFERER"）//前端验证
request.FILES.getlist（「ファイル」）でのfに対する：//サイクル店の写真ギャラリーへ
プロ=証明（）
pro.provePeople =からrequest.user
pro.provePhoto = F
pro.save（）
リターンJsonResponseは（{「コード」：「0」、「MSG」：「OK」}）// JSON戻りなし遠位ポートを返すは、異常をアップロードするように要求され