最近の検索エンジンは、元に基づいて追加することで、このプロジェクトを使用する必要が画像検索機能を、あなたが最初にしなければなりません写真をアップロードするサーバーに！
ためのオンライン類似したコードの多くが、若干の問題、フロントエンドとAjaxとあまり慣れていないので、この機能を得るために、比較的長い時間を取得。
A、HTMLコード
ラベル入力ボックスでアップロード画像のアイコンコードラベルが検索ピクチャーが一緒に結合して、ファイルをアップロードする
ファイルをアップロードするには、ボタンをクリックするのと同等で、タグの入力ファイルの種類は、隠された絵をクリックすると、フォームが使用外ですアップロードされた画像を表示します。
<form >
{% csrf_token %}
<label>
<img id="image_upload" class="searchUploadImage" src="/static/images/uploadImage.png" width="48" height="48" title="图片智能搜索">
<input id="image-input" hidden type="file" name="image">
</label>
</form>
<img id="image-img" src="/static/images/test.png" width="224" height="225">
ボディタグ内のAJAX部分
<script>
// 上传文件按钮（label里的图片）点击事件
$('#image-input').on('change',function () {
{#alert('hello');#}
upload();
// 获取用户最后一次选择的图片
var choose_file = $(this)[0].files[0];
// 创建一个新的FileReader对象，用来读取文件信息
var reader = new FileReader();
// 读取用户上传的图片的路径
reader.readAsDataURL(choose_file);
// 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径
reader.onload = function () {
$("#image-img").attr("src", reader.result)
};
});
function upload() {
var formdata = new FormData();
formdata.append("image", $("#image-input")[0].files[0]);
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
$.ajax({
processData:false,
contentType:false,
url:'/upload/',
type:'post',
data:formdata,
dataType:"json",
success:function (arg) {
if (arg.state == 1){
alert('上传成功！')
}else {
alert('上传失败！')
}
},error: function () {
alert("访问繁忙，请重试")
}
})
}
</script>
二、ジャンゴ一部
urls.py
from django.urls import path, re_path
from search.views import upload
path('upload/', upload, name="upload"),
views.py
def upload(request):
if request.method == 'POST':
image = request.FILES.get('image')
with open('search/utils/images/' + image.name, 'wb') as f:
for line in image:
f.write(line)
print('------image=', image.name, '------------')
try:
data = {'state': 1}
except:
data = {'state': 0}
return JsonResponse(data)
return render(request, 'index.html')
だから、[OK]を、私はあなたがAJAX非同期操作を使用することを示唆している、通常のフォームに少し問題をジャンプします。
参考ます。https：//www.cnblogs.com/jiangchunsheng/p/8974732.html
