我有一个Django Web应用程序,我在其中上传图像并显示一些文本。但是上传后我无法在前端显示图像。
views.py
def index(request):
if request.method == "GET":
return render(request, 'index.html')
elif request.method == "POST":
input_file = request.FILES['file']
media_root = settings.MEDIA_ROOT
fs = FileSystemStorage()
filename = fs.save(input_file.name, input_file)
uploaded_file_url = fs.url(filename)
filepath = os.path.join(media_root, filename)
images = segment_lines(filepath)
extracted_text = extract()
copy2(filepath, '/home/user/ocr/ocr/static/'+ filename)
response = { "response" : extracted_text, "img": filename}
return JsonResponse(response, safe=False)
index.html
<form action="" id="file-form" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-9">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" accept="image/*" name="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-md-2 col-lg-3">
<span class="upload-btn">
<button type="submit" id='upload-button' class="btn btn btn-outline-dark">Extract</button>
</span>
</div>
</div>
</form>
<div class="row" style="border:none;">
<div class="col-xs-6 mx-auto" id="img_data">
</div>
<div class="col-xs-6 mx-auto" id="content_data">
</div>
</div>
<script type="text/javascript">
var form = document.getElementById('file-form');
var fileSelect = document.getElementById('inputGroupFile01');
var uploadButton = document.getElementById('upload-button');
form.onsubmit = function(event) {
event.preventDefault();
uploadButton.innerHTML = 'Processing ...';
var file = fileSelect.files[0];
var formData = new FormData();
formData.append('file', file, file.name);
formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:8000', true);
xhr.onload = function () {
if (xhr.status === 200) {
uploadButton.innerHTML = 'Extract';
var data = JSON.parse(xhr.responseText);
var follow_up = data['response'];
var corrected = data["correct_response"]
var demoid = document.getElementById("content_data");
var btnid = document.getElementById('btn-data')
var imgid = document.getElementById('img_data')
var img_path = data["img"]
var final_content = follow_up;
demoid.innerHTML = '<h3>Extracted Text</h3><p id="rcorners3">' + final_content + '</p>'
</script>
如何在此处显示上传的图片,我对javascript的了解很少,因此如果有人可以帮助我!
到目前为止,我尝试的是传递图像路径URL,并使用{%static%}尝试显示如下图像
imgid.innerHTML = '<h3>Your Image</h3><img class="id-of-img-tag" src="" alt="img" style="width:300px;height:300px;margin-right:15px;">'
document.querySelector(".id-of-img-tag").src = "{% static " + img_path + " %}";
答案 0 :(得分:1)
如果图像的路径有效,则应使用new Image()
构造函数创建图像。这类似于执行document.createElement('img')
创建图像。构造函数返回一个HTMLImageElement
实例,该实例基本上是与<img>
元素等效的JavaScript。
为确保正确加载,请监听图像上的load
事件。这样,当图像下载完成后,您可以将其添加到页面中。
然后设置图像的src
属性(还将设置属性)以开始从静态文件夹下载图像。
...
var btnid = document.getElementById('btn-data')
var imgid = document.getElementById('img_data')
var img_path = data["img"]
var image = new Image();
image.addEventListener('load', function() {
var title = document.createElement('h3');
title.textContent = 'Your image';
image.className = 'id-of-img-tag';
image.alt = 'img';
image.style.width = '300px';
image.style.height = '300px';
image.style.marginRight = '15px';
imgid.append(title, image);
}, {once: true});
image.src = img_path;
var final_content = follow_up;
demoid.innerHTML = '<h3>Extracted Text</h3><p id="rcorners3">' + final_content + '</p>'
答案 1 :(得分:0)
您可能需要使用fs.url()
来重新构建已保存图像的URL。
此外,如评论中所述,segment_lines()
应该真正返回extract_text()
将使用的文件名列表。否则,如果/当您使用单个临时文件夹时,并发请求将造成严重破坏。
from django.core.files.storage import FileSystemStorage
from django.http import JsonResponse
def extract_text(input_paths):
# ... Do some magic using the input paths ...
return 'hello'
def segment_lines(image_path):
return [
# ... file paths for segmented result...
]
def handle(request):
input_file = request.FILES['file']
fs = FileSystemStorage()
filename = fs.save(input_file.name, input_file)
images = segment_lines(fs.path(filename))
extracted_text = extract_text(images)
response = {"response": extracted_text, "img_url": fs.url(filename)}
return JsonResponse(response)
然后,使用fetch()
和表单数据来简化HTML版本:
<form action="" id="file-form" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" accept="image/*" name="file" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<button type="submit" id='upload-button' class="btn btn btn-outline-dark">Extract</button>
</form>
<div id="content_data"></div>
<script type="text/javascript">
var form = document.getElementById('file-form');
var uploadButton = document.getElementById('upload-button');
form.onsubmit = function (event) {
event.preventDefault();
uploadButton.innerHTML = 'Processing ...';
fetch('/', {body: new FormData(form)})
.then(resp => resp.json())
.then(data => {
console.log(data);
const demoid = document.getElementById('content_data');
demoid.innerText = JSON.stringify(data);
// or to show the image:
// demoid.innerHTML = `<img src="${data.img_url}"/>`;
});
};
</script>
肯定有一些我想念的东西。