Django forma de subir archivos ajax forma y

Django forma de subir archivos ajax forma y

Por defecto, la forma no es una forma de transferencia de archivos. Incluso si escribimos un tipo en el tipo de archivo de entrada como etiquetas HTML. Esto se debe a que el método de transmisión formulario HTML predeterminado application/x-www-form-urlencoded. Sin embargo, este método no puede transferir archivos. Cuando se utiliza este método para transferir archivos, sólo podemos ver el nombre del archivo en la parte de atrás, pero no todo el archivo.

Vistas de la función de vista al intentar imprimir el archivo de datos adquiridos y POST, los siguientes resultados:

<MultiValueDict: {}>
<QueryDict: {'csrfmiddlewaretoken': ['jEKPQOvvCeD4q96ET9zVU5xBTdlgmbgPQb7c5EhvNsrYdT8L4KBw8IuBTmlFOUwj'], 'avata': ['1571311850334.png']}>

En este momento, vamos a formar formará etiqueta en el código HTML más enctype="multipart/form-data"propiedades pueden subir archivos, modificar el formato de la cabecera del mensaje de tipo de contenido en la solicitud lleva en su esencia:

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    用户名:<input type="text" name="username">
    头像: <input type="file" name="file_obj">
    <input type="submit">
</form>

escribir vistas función de vista:

def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        print(request.POST)
        print(request.FILES)
        file_obj = request.FILES.get('file_obj')    # FILES 是一个类似于字典的对象，file_obj（也就是HTML文件input标签中的name属性值）对应的值才是文件对象
        print(file_obj.name)
        with open(file_obj.name,'wb') as f:
            # for i in file_obj:
            #     f.write(i)
            for i in file_obj.chunks():  # 65536字节
                f.write(i)
                return HttpResponse('ok')

Cuando se establece el atributo enctype de la etiqueta de formulario, el archivo se ha pasado con éxito a la función de vista:

<MultiValueDict: {'avata': [<InMemoryUploadedFile: 1571311850334.png (image/png)>]}>
<QueryDict: {'csrfmiddlewaretoken': ['QTtPqw8y7nldamyW4uZzY6m5yzHglvGMnqQcFmUyiB97X6A3f51acJj5yIHFNeWg']}>

Get file_objes un objeto de archivo, como un identificador de archivo. Nos puede recorrer identificadores de archivo directos para el archivo línea por línea escrita a la local. Cada línea del archivo si es más larga, tales como archivos multimedia como imágenes, tal vez sólo una línea, si usamos la línea escrita por línea, que tomará una gran cantidad de recursos de memoria. Por lo tanto se recomienda más para utilizar un bucle file_obj.chunks(), por lo que cada ciclo sólo 65.536 bytes de contenido, con el fin de aliviar la presión sobre la memoria.

subir archivos ajax

ajax código js sobre todo, no para cambiar el código HTML, sólo tienes que añadir real cuando atributo id para que sea más fácil encontrar la etiqueta de destino:

{% csrf_token %}
用户名:<input type="text" name="username">
头像: <input type="file" name="file_obj">
<input type="submit" id="btn">

Cuando se usa ajax subir archivos, tiene que modificar alguna configuración js. En primer lugar, los datos del archivo no puede ser una costumbre ordinaria objetos guardados, pero la necesidad de usar la new FormDatainstrucción para crear un formulario de objetos de datos. Utilizar el comando para añadir un par clave-valor se inserta en el tema. También es necesario valorar y processData contentType se establece en false. Esto se realiza utilizando archivos de carga con ajax fijo, Ajax no solicita datos de las operaciones de procesamiento:

$('#btn').click(function () {
    var formdata = new FormData();
    var uname = $('[name="username"]').val();
    // var file_obj = $('[name="file_obj"]').val(); //"C:\fakepath\0.jpg" 拿到的文件的本地路径
    var f_obj = $('[name="file_obj"]')[0].files[0] ; // 这是文件对象，注意是files而不是file

    formdata.append('username',uname);    // 将数据添加到formdata对象中
    formdata.append('file_obj',f_obj);
    formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());
    $.ajax({
        url:'/upload/',
        type:'post',
        // 上传文件时的固定搭配 formdata
        processData:false,
        contentType:false,
        data:formdata,
        // data:{uname:uname,file_obj:f_obj,'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()},
        success:function (res) {
        console.log(res)
        }

    })
})

Como función de vista, si el parámetro no cambia, puede por completo no requiere modificación.