jquery为我们网站开发解决了很多问题，使我们的网站用户体验大大的提高了。举个简单的例子，我们用ajax技术来实现对表单的异步提交，使用户在体验上有了很大的改观，用户在提交数据的同时还可以干一些其他的事情。
不过，今天在开发中遇到一个特别头痛的问题，刚开始不知道，以为可以实现，纠结了将近4个小时之久，但结果很是令人失望。
问题是这样的：为了提高用户体验，我决定使用ajax异步提交，于是我用jquery的$.post去异步提交表单数据，文本信息可以很轻松的提交，但是，却怎么也无法提交图片数据。怎么办呢？
在网上查了很多资料，后来发现jquery不支持图片上传（附件上传），但是有相关的插件，于是我开始慢慢琢磨，开始用另一个专门上传文件的插件jquery.ajaxfileupload.js，折腾了很久，总可以上传图片了。但是新的问题有产生了。
通过ajaxfileupload来异步上传图片的同时，却不能提交文本数据。囧啊…….
在网上查了很多资料，折腾了许久，没有django开发的相关资料，怎么办？自己想办法…….
后来找到了解决方案，跟大家分享一下：
思路：
由于使用jquery.ajaxfileupload.js插件不能传递自定义的参数，肿么办？自己改写插件呗。碰巧，网上有别人改过的现成代码，二话不说，先拿来试试。以下即是我试验的过程。
1. 前台页面（部分代码）：
证书名称：
证件类型： 身份证 学位证 其他证
证书描述：
附件地址：
2. 更改后的jquery.ajaxfileupload.js：
jquery.extend({ createuploadiframe: function(id, uri) { //create frame var frameid = 'juploadframe' + id; if(window.activexobject) { var io = document.createelement(''); if(typeof uri== 'boolean'){ io.src = 'javascript:false'; } else if(typeof uri== 'string'){ io.src = uri; } } else { var io = document.createelement('iframe'); io.id = frameid; io.name = frameid; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendchild(io); return io }, createuploadform: function(id, fileelementid, data) { //create form var formid = 'juploadform' + id; var fileid = 'juploadfile' + id; var form = $(''); var oldelement = $('#' + fileelementid); var newelement = $(oldelement).clone(); $(oldelement).attr('id', fileid); $(oldelement).before(newelement); $(oldelement).appendto(form); //增加文本参数的支持 if (data) { for (var i in data) { $('').appendto(form); } } //set attributes $(form).css('position', 'absolute'); $(form).css('top', '-1200px'); $(form).css('left', '-1200px'); $(form).appendto('body'); return form; }, ajaxfileupload: function(s) { // todo introduce global settings, allowing the client to modify them for all requests, not only timeout s = jquery.extend({}, jquery.ajaxsettings, s); var id = new date().gettime() var form = jquery.createuploadform(id, s.fileelementid, s.data); var io = jquery.createuploadiframe(id, s.secureuri); var frameid = 'juploadframe' + id; var formid = 'juploadform' + id; // watch for a new set of requests if ( s.global && ! jquery.active++ ) { jquery.event.trigger( ajaxstart ); } var requestdone = false; // create the request object var xml = {} if ( s.global ) jquery.event.trigger(ajaxsend, [xml, s]); // wait for a response to come back var uploadcallback = function(istimeout) { var io = document.getelementbyid(frameid); try { if(io.contentwindow) { xml.responsetext = io.contentwindow.document.body?io.contentwindow.document.body.innerhtml:null; xml.responsexml = io.contentwindow.document.xmldocument?io.contentwindow.document.xmldocument:io.contentwindow.document; }else if(io.contentdocument) { xml.responsetext = io.contentdocument.document.body?io.contentdocument.document.body.innerhtml:null; xml.responsexml = io.contentdocument.document.xmldocument?io.contentdocument.document.xmldocument:io.contentdocument.document; } }catch(e) { jquery.handleerror(s, xml, null, e); } if ( xml || istimeout == timeout) { requestdone = true; var status; try { status = istimeout != timeout ? success : error; // make sure that the request was successful or notmodified if ( status != error ) { // process the data (runs the xml through httpdata regardless of callback) var data = jquery.uploadhttpdata( xml, s.datatype ); // if a local callback was specified, fire it and pass it the data if ( s.success ) s.success( data, status ); // fire the global callback if( s.global ) jquery.event.trigger( ajaxsuccess, [xml, s] ); } else jquery.handleerror(s, xml, status); } catch(e) { status = error; jquery.handleerror(s, xml, status, e); } // the request was completed if( s.global ) jquery.event.trigger( ajaxcomplete, [xml, s] ); // handle the global ajax counter if ( s.global && ! --jquery.active ) jquery.event.trigger( ajaxstop ); // process result if ( s.complete ) s.complete(xml, status); jquery(io).unbind() settimeout(function() { try { $(io).remove(); $(form).remove(); } catch(e) { jquery.handleerror(s, xml, null, e); } }, 100) xml = null } } // timeout checker if ( s.timeout > 0 ) { settimeout(function(){ // check to see if the request is still happening if( !requestdone ) uploadcallback( timeout ); }, s.timeout); } try { // var io = $('#' + frameid); var form = $('#' + formid); $(form).attr('action', s.url); $(form).attr('method', 'post'); $(form).attr('target', frameid); if(form.encoding) { form.encoding = 'multipart/form-data'; } else { form.enctype = 'multipart/form-data'; } $(form).submit(); } catch(e) { jquery.handleerror(s, xml, null, e); } if(window.attachevent){ document.getelementbyid(frameid).attachevent('onload', uploadcallback); } else{ document.getelementbyid(frameid).addeventlistener('load', uploadcallback, false); } return {abort: function () {}}; }, uploadhttpdata: function( r, type ) { var data = !type; data = type == xml || data ? r.responsexml : r.responsetext; // if the type is script, eval it in global context if ( type == script ) jquery.globaleval( data ); // get the javascript object, if json is used. if ( type == json ) eval( data = + data ); // evaluate scripts within html if ( type == html ) jquery().html(data).evalscripts(); //alert($('param', data).each(function(){alert($(this).attr('value'));})); return data; } })
3. 调用方法
//保存附件信息 function saveannexinfo() { var prove_name = $(#id_prove_name).val(); //从界面得到值 var prove_type = $(#id_prove_type).val(); var prove_desc = $(#id_prove_desc).val(); $.ajaxfileupload({ url: /test/annex_info /, //请求的url地址 secureuri:false, fileelementid:'id_prove_url', datatype: 'json', data: { //加入的文本参数 prove_name:prove_name, prove_type:prove_type, prove_desc:prove_desc }, success: function(data) { asyncbox.tips('操作成功！', 'success'); }, error: function() { asyncbox.tips(上传失败，请检查文件是否符合格式要求。); } }); }
4. python后台处理（代码片段）
if annex_form.is_valid(): annex_info = annex_form.save(commit=false) #获取上传 annex_url = request.files.get('prove_url','') #取附件 annex_info.entry = entry_info annex_info.prove_url = annex_url annex_info.save() return httpresponse(1) #操作成功 return httpresponse(0) #操作失败
希望本文所述对大家的python程序设计有所帮助。