También es cierto que por tema de "atomicidad" queda más bonito enviar imágenes y datos en un solo POST que sólo puede o tener éxito o fallar.
Si en concreto usamos chrome en el cliente, podemos hacer un sencillo "work arround" instalando una extensión de chrome que pida la lectura de unos ficheros en concreto y dándole permisos. Esto tiene la ventaja de que hacemos un solo POST con toda la información necesaria.
Para acceder a los ficheros en el cliente, primero creamos el manifiesto de la extensión de chrome con la lista de ficheros a los que queremos acceder, que deben estar todos en el mismo directorio. El manifiesto también lo guardamos en ese directorio.
manifest.json
{
"name": "File holder",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["imagen1.jpg", "imagen2.jpg", "imagen3.jpg"]
}
Ahora, instalamos la extensión: Vamos a chrome->extensions, activamos developer mode y hacemos Load unpacked extension. A partir de este momento, podemos acceder las imágenes locales desde el navegador con
chrome-extension://[app-id]/[imagen]
donde [app-id] es el id de aplicación que nos sale cuando instalamos la extensión. Ya podemos acceder a los ficheros locales con el protocolo chrome-extension, por ejemplo con
chrome-extension://debeanplnpndkfnlbalbmkikofkghfmk/imagen1.jpg
Podemos enviar la imagen al servidor mediante un POST, así:
$("#bt_envia").on("click", function (e) {
var x = new XMLHttpRequest();
x.onload = function() {
// Create a form
var fd = new FormData();
fd.append("upfile", x.response);
fd.append("csrfmiddlewaretoken", "{{ csrf_token }}");
// Upload to your server
var y = new XMLHttpRequest();
y.onload = function() {
alert('File uploaded!');
};
y.open('POST', '/gestion/prova/');
y.send(fd);
};
x.responseType = 'blob';
x.open('GET', 'chrome-extension://debeanplnpndkfnlbalbmkikofkghfmk/foto.jpg');
x.send();
});
Fuente: varios en stackoverflow y
http://stackoverflow.com/questions/10611796/is-there-any-way-to-load-a-local-js-file-dynamically