ajax - integration jquery upload file plugins with Django form -
i don't understand how integrate jquery plugins ajax function post django form. have seen examples dealing 1 field, file upload. if form contains other fields (textbox, select, etc.)?
here html form (i have drop down list , file upload):
<form id="import_form" class="form-horizontal" method="post" enctype="multipart/form-data">{% csrf_token %} {{ form.non_field_errors }} <div id="filetoimportchoice" class="fieldwrapper"> {{ form.filetoimport.errors }} {{ form.filetoimport }} </div> <div id="file_to_import" class="fieldwrapper"> {{ form.csvfile.errors }} {{ form.csvfile }} </div> <input type="button" id="import_button" value="import" onclick="javascript:display_message('{% url import %}', document.getelementbyid('import_form'))" /> </form> here jquery function:
function display_message(link, form) { var datastring = $(form).serialize(); $.ajax( { url: link, type: 'post', datatype: 'json', enctype: "multipart/form-data", data: datastring, success: function(result) { //form not valid -> displays errors if (result.form_errors) { //append current errors html form errors=result.form_errors (var key in errors) { $("#"+key+"_errors").html('<ul class="errorlist"><li>'+errors[key]+'</li></ul>'); //~ alert(key+': '+errors[key]); } } else { } } }); } first question: should insert name of file in datastring variable? moment, each time display form errors, django complains csvfile empty, if have selected file upload. guess it's normal no plugin. right?
now, main question: how integrate jquery plugins function? have seen simple 1 called simple-ajax-uploader. here example of how use it:
var uploader = new ss.simpleupload({ button: $('#uploadbtn'), // upload button url: '/uploadhandler', // url of server-side upload handler name: 'userfile', // parameter name of uploaded file onsubmit: function() { this.setprogressbar( $('#progressbar') ); // designate elem our progress bar }, oncomplete: function(file, response) { // whatever after upload finished } }); so finally... how send file data along other data of form? idea call plugin in display_message function , update datastring variable contains data post view. if so, how?
edit: looking simple plugin, just 1 file upload, no need custom css. , want portable (so html5 , formdata excluded).
one way upload whole form files in send form hidden iframe , read iframe's contents server response. example code:
<form method="post" action="..." enctype="multipart/form-data" target="iframe-name"> ... </form> <iframe name="iframe-name"></iframe> you need handle load event on iframe , use iframe.contentdocument.body.innerhtml read iframe's contents (server should return html <body> tag cross-browser compatibility). actual iframe element can dynamically created , hidden using javascript.
it's rather easy write such plugin, on other hand of upload plugins available on internet use method upload files.
Comments
Post a Comment