如何将多个值添加到输入标签 - js

Question

i'm trying to capture multiple images and then save into the database here is the js code

 const player = document.getElementById('player') const canvas = document.getElementById('canvas') const form = document.getElementById('form') const docs = document.getElementById('documents') const captureButton = document.getElementById('capture') const context = canvas.getContext('2d') captureButton.addEventListener('click', (e) => { context.drawImage(player, 0, 0, canvas.width, canvas.height) e.preventDefault(); let new_image = document.createElement('img') new_image.src = canvas.toDataURL() console.log(new_image) docs.value = canvas.toDataURL() form.insertAdjacentElement('beforeend',new_image) e.preventDefault(); }); navigator.mediaDevices.getUserMedia({video: true}).then((stream) => { player.srcObject = stream;})

 <form id="form" action="" method="POST" enctype="multipart/form-data">{% csrf_token %} <video id="player" controls autoplay></video> <button type="button" id="capture">Capture</button> <button>save</button> <canvas id="canvas" width=320 height=240></canvas> <input type="text" name="documents" hidden id="documents"> </form>

and here is my views.py to get multiple base64 data and split it by using its data attribute, here is my code

@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.method == 'POST':
        images = request.POST.get('documents')
        data,imgdata = images.split('data')
        for img in imgdata:     
            print(img)       
            format, imgstr = img.split(';base64,') 
            ext = format.split('/')[-1] 
            data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)
            photo = Document.objects.create(
                booking = obj,
                docs = data                
            )
            photo.save()
        return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
    else:
        messages.error(request,_('choose or capture right image ..'))
    return render(request,'booking/add_img.html',{'obj':obj})

but it raise this error:

not enough values to unpack (expected 2, got 1)

and the print(img) returns only: ! and when i remove the for loop and add this format, imgstr = imgdata.split(';base64,') it saves only the last image, please is there any way to achieve it? to add all base64 data from js to input tag and then split the input data by its data base64 attribute. thanks in advance..

Answer 1

Where is your template snip, I assume you're not using ajax here so if you're having multiple image tags you would do something like this

<img src='image01' name=image' class =" something"/>
<img src='image02' name=image' class =" something"/>
<img src='image03' name=image' class =" something"/>

images = request.FILES.getlist('image')

then returns a list of images and consequently you can save them in you database

Answer 2

• You need to create <input> , not <image>

• You're not appending anything by doing docs.value = canvas.toDataURL() , just overwriting old values.

---

 const player = document.getElementById('player') const canvas = document.getElementById('canvas') const form = document.getElementById('form') const captureButton = document.getElementById('capture') const context = canvas.getContext('2d') captureButton.addEventListener('click', (e) => { context.drawImage(player, 0, 0, canvas.width, canvas.height) let new_data = document.createElement('input') // <== use <input> new_data.setAttribute('name','document') new_data.value = canvas.toDataURL() form.insertAdjacentElement('beforeend',new_data) }); navigator.mediaDevices.getUserMedia({video: true}).then((stream) => { player.srcObject = stream;})

 form *{max-width:20vw;} img{display:inline-block;} canvas{display:none;}

 <form id="form" action="" method="POST" enctype="multipart/form-data"> <video id="player" controls autoplay></video> <button type="button" id="capture">Capture</button> <button>save</button> <canvas id="canvas" width=320 height=240></canvas> </form>

https://jsfiddle.net/c7ykg83h/