Javascript 使Django数据Url属性字符串表单在.prepend中工作

我有一个django web应用程序（esr_submit），它有一个表单和上传文件的功能。上载文件时（使用fileupload jquery），需要通过prepend操作更新上载文件的列表，复制和的html。该按钮包含一个数据url属性，该属性调用django url及其相应视图以完成删除操作。如何将数据url属性设置为字符串以使脚本正常工作

views.py

from django.shortcuts import render, redirect
from .forms import ServiceRequestForm, FileForm
from .models import RequestAttachment
from django.http import JsonResponse


def delete_file(request, pk):if request.method == 'POST':
        file = RequestAttachment.objects.get(pk=pk)
        file.delete()
    return redirect('/esr_submit/files')


def esr_submit(request):
    files = RequestAttachment.objects.all()
    if request.user.is_authenticated:
        initial_data = {'first_name': request.user.first_name,
                        'last_name': request.user.last_name,
                        'email': request.user.email,
                        'contact': request.user.phone,
                        }
        request_form = ServiceRequestForm(initial=initial_data)
    else:
        request_form = ServiceRequestForm()
    if request.method == 'POST':
        if 'submit_request' in request.POST:
            request_form = ServiceRequestForm(request.POST)
            if request_form.is_valid():
                request_form.save()
                return redirect('/esr_submit/')
            else:
                print(request_form.errors)
                return redirect('/esr_submit/')

        if 'file' in request.FILES:
            form = FileForm(request.POST, request.FILES)
            if form.is_valid():
                file = form.save()
                data = {'is_valid': True, 'name': file.file.name, 'url': file.file.url}
            else:
                data = {'is_valid': False}
            return JsonResponse(data)
        else:
            print("not a file form")
    else:
        files_list = RequestAttachment.objects.all()
        return render(request, 'esr_submit/esr_submit.html',
                      {'request_form': request_form,
                       'files': files,
                       'photos': files_list
                       }
                      )

url.py
从django.url导入路径
从…起导入视图
URL模式=[
路径（“”，views.esr_submit，name='esr_submit'），
路径（'files/'，views.file_list，name='file_list'），
路径（'files/'，views.delete_file，name='delete_file'），

esr_submit.html
{%extends“main/base.html”%}
{%block title%}
提交ESR
{%endblock%}
{%load crispy_forms_tags%}
{%block content%}


新的工程服务请求
{%if not request.user.is_authenticated%}
想加快速度吗？
{%endif%}
{%csrf_令牌%}
{%crispy请求\u表单%}
上载文件
{#2.插件使用的文件输入}
{#3.显示上载文件的表#}
{%if照片中的照片%}
附件
{%else%}
{%endif%}
{文件%中的文件为%s}
{%if file.file%}
X
{%else%}
{%endif%}
{%endfor%}
提交请求
保存草稿
{%endblock内容%}

script.js（加载在base.html上）
/*使用AJAX的多文件上传-从简单的例子优于复杂的例子*/
$（函数fileupload（）{
/*1.打开“文件资源管理器”窗口*/
$（“.js上传照片”）。单击（函数（）{
$（“#文件上载”）。单击（）；
});
/*2.初始化文件上载组件*/
$（“#fileupload”）.fileupload({
数据类型：“json”，
完成：函数（e，data）{/*3。处理来自服务器的响应*/
if（data.result.is_有效）{
console.log（数据）
$（“#文件表tbody”）.prepend(
“X”
)
}
}
});
});
$（“#myTable”）。在（'单击'，'上。文件删除btn'，函数（e）{
e、 预防默认值（）；
var tableId=$（this.attr（'file-table'））
var fileId=$（this.attr（'data-id'）；
var formAction=$（this.attr（'data-url'）；
$.ajax({
url:formAction，
方法：“POST”，
成功：函数（）{
$（“#文件-”+fileId）.remove（）
log（“文件已删除”）
$（“#myTable”）.load（“#myTable”）；
},
错误：函数（errorData）{
console.log（“错误”）
console.log（errorData）
}
});

如果这是一个单独的文件，则不能在Javascript中使用

{%url%}

标记。 如果您只有一个文件

script.js

，它将无法工作

在这种情况下，您希望为删除部分生成正确的URL。以最可靠的方式执行此操作的最佳方法（因此，如果您编辑URL.py，它仍然可以工作）是使用Django UrlResolver。 然后将数据返回到上载过程

在Python文件的顶部，放置以下内容：

from django.core.urlresolvers import reverse

esr\u submit（）

中POST部分的最后一位可能如下所示：

如果request.FILES中有“file”：
form=FileForm（request.POST、request.FILES）
如果form.is_有效（）：
file=form.save（）
数据={'is_valid'：True，'name'：file.file.name，'url'：file.file.url，'file_id'：file.id，'remove_url'：reverse（'esr_submit:delete_file'，args=[file.id]）
其他：
数据={'is_valid'：False}
返回JsonResponse（数据）
其他：
打印（“非文件格式”）

Javascript位可能如下所示：

/*2.初始化文件上载组件*/
$（“#fileupload”）.fileupload({
数据类型：“json”，
完成：函数（e，data）{/*3。处理来自服务器的响应*/
if（data.result.is_有效）{
$（“#文件表tbody”）.prepend(
“X”
)
}
}
});

---

我没有运行你的应用程序，这是我的想法。

编辑了问题以添加更多上下文。感谢你的快速回答。对于脚本的{%url%}部分，我是否需要更改格式才能正常工作？非常抱歉，我理解错了（它来自AJAX上传调用），我将再次更新我的评论，只需几分钟来澄清，{%url%}的编写方式

esr_submit.html

{% extends "main/base.html" %}
{% block title %}
Submit an ESR
{% endblock %}
{% load crispy_forms_tags %}

{% block content %}
<head>

</head>
<br>
    <div class="container">
        <div class="row justify-content-md-center mb-2">
            <div class="col-sm-8 mb-4 shadow-lg p-3 bg-white rounded">
                <div class="header mb-2">
                    <h3 class="header mb-0 text-center">New Engineering Service Request</h3>
                    {% if not request.user.is_authenticated %}
                    <div class="text-center">
                        <small class="text-muted"><strong>Want to speed things up? </strong>
                            <a href="/login/?next=/esr_submit/"> Log In |</a>
                        </small>
                        <small class="text-muted">
                            <a href="/register/?next=/esr_submit/">Create an account </a>
                        </small>
                    </div>
                    {% endif %}
                </div>
                <form method="post" enctype="multipart/form-data" id="request_form"
                      class="request_form">
                    <div class="col">
                        {% csrf_token %}
                        {% crispy request_form %}
                        <span class="helper-text"></span>
                    </div>
                </form>
                <div class="container">
                    <button type="button" class="btn btn-primary js-upload-photos">
                    <span class="glyphicon glyphicon-cloud-upload"></span> Upload File(s)
                    </button>

                {# 2. FILE INPUT TO BE USED BY THE PLUG-IN #}
                    <form id="fileForm">
                      <input id="fileupload" type="file" name="file" class="file" multiple
                           style="display: none;"
                           data-url="{% url 'esr_submit:esr_submit' %}"
                           data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
                    </form>

                {# 3. TABLE TO DISPLAY THE UPLOADED FILES #}
                    <div id="myTable">
                        <table id="file-table" class="file-table table-borderless">
                          <thead>
                            <tr>
                                {% if photo in photos %}
                                <th>Attached Files</th>
                                {% else %}
                                {% endif %}
                            </tr>
                          </thead>
                          <tbody class="file-body">
                            {% for file in files %}
                              {% if file.file %}
                                <tr id="file-{{file.id}}"
                                    class="file">
                                    <td class="w-50">
                                      <a href="{{ file.file.url }}" target="_blank">{{ file.file }}</a>
                                    </td>
                                    <td class="delete" id="delete">
                                        <button type=submit data-id="file-{{file.id}}" data-url="{% url 'esr_submit:delete_file' file.pk %}" class="file-delete-btn btn btn-danger btn-sm">X</button>
                                    </td>
                                </tr>
                              {% else %}
                              {% endif %}
                            {% endfor %}
                          </tbody>
                        </table>
                    </div>
                </div>
                <div class="pl-2 mt-2">
                    <button type="submit" name="submit_request" value="submit_request" class="btn btn-primary" form="request_form">Submit Request</button>
                    <button type="submit" name="save_draft" value="save_draft" id="save_draft" class="btn btn-primary" form="request_form">Save Draft</button>
                </div>
            </div>
        </div>
    </div>
{% endblock content%}

script.js (loaded on the base.html)

/* Multiple File Upload Using AJAX - FROM SIMPLE IS BETTER THAN COMPLEX EXAMPLE */
$(function fileupload() {
  /* 1. OPEN THE FILE EXPLORER WINDOW */
  $(".js-upload-photos").click(function () {
    $("#fileupload").click();
  });

  /* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
  $("#fileupload").fileupload({
    dataType: 'json',
    done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
      if (data.result.is_valid) {
        console.log(data)
        $("#file-table tbody").prepend(
          "<tr><td><a href='" + data.result.url + "' target='_blank'>" + data.result.name + "</a></td><td class='delete'><button type=submit data-id='file-{{file.id}}' data-url="{% url 'esr_submit:delete_file' file.pk %}" class='file-delete-btn btn btn-danger btn-sm'>X</button></td></tr>"
        )
      }
    }
  });
});


$('#myTable').on('click', '.file-delete-btn', function(e){
    e.preventDefault();

    var tableId = $(this).attr('file-table')
    var fileId = $(this).attr('data-id');
    var formAction = $(this).attr('data-url');

        $.ajax({
        url: formAction,
        method: 'POST',
        success: function(){
            $("#file-" + fileId).remove()
            console.log("file removed")
            $("#myTable").load(" #myTable");
        },
        error: function(errorData){
            console.log("error")
            console.log(errorData)
        }
        });

from django.core.urlresolvers import reverse