Question

我在Flask中构建了一个图像标记器。我目前有它工作，所以用户可以选择一个本地图像上传，让它显示为预览，然后他可以选择一个标签（可爱与否）并上传图像。

我需要用户能够选择多个图像进行上传，并在预览中的每个图像下方显示标签按钮。然后，用户可以为每个图像选择标签并上传。

目前，我只是简单地对一个按钮进行了编码，因为我不知道该往哪里去。这是我到目前为止所得到的：

<!doctype html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
</head>
    <title>Upload new File</title>
    <h1>Upload new File</h1>
    <form method=post enctype=multipart/form-data>

      <p>
        <img id="fileId" width="200" height="200"/>
        <input type=file name=file onchange="document.getElementById('fileId').src = window.URL.createObjectURL(this.files[0])" multiple=>
         <input type=submit value=Upload>

         <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
              <input type="radio" name="options" value="cute" checked> Cute
            </label>
            <label class="btn btn-primary">
              <input type="radio" name="options" value="!cute"> !Cute
            </label>

    </form>



#Flask file
@app.route('/', methods=['GET', 'POST'])
def upload_file(label1 = 'cute', label2 = '!cute'): 
    app.debug = True  
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        # if user does not select file, browser also
        # submit a empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            #Get label from radio button that's clicked
            label = request.form['options']
            #Move image to correct directory based on labeling
            #print("{} is the folder path and {} is the label".format(labeled_UPLOAD_FOLDER, label))
            if label == label1:
                file.save(os.path.join(app.config['UPLOAD_FOLDER'], label1, filename))
            else:
                file.save(os.path.join(app.config['UPLOAD_FOLDER'], label2, filename))

            return redirect(url_for('uploaded_file', filename=filename, chosenLabel=label))

    return app.send_static_file('index.html')



@app.route('/uploads/<chosenLabel>/<filename>')
def uploaded_file(filename, chosenLabel):
    return send_from_directory(os.path.join(app.config['UPLOAD_FOLDER'], 
chosenLabel), filename)

任何关于如何做到这一点的想法都会很棒。我认为我需要一些js。

如何为每个选择上传的文件创建一个按钮？

0 个答案: