Django实现图片文字同时提交的方法
本文实例讲述了Django实现图片文字同时提交的方法。分享给大家供大家参考。具体分析如下:
jQuery为我们网站开发解决了很多问题,使我们的网站用户体验大大的提高了。举个简单的例子,我们用AJAX技术来实现对表单的异步提交,使用户在体验上有了很大的改观,用户在提交数据的同时还可以干一些其他的事情。
不过,今天在开发中遇到一个特别头痛的问题,刚开始不知道,以为可以实现,纠结了将近4个小时之久,但结果很是令人失望。
问题是这样的:为了提高用户体验,我决定使用AJAX异步提交,于是我用jQuery的$.post去异步提交表单数据,文本信息可以很轻松的提交,但是,却怎么也无法提交图片数据。怎么办呢?
在网上查了很多资料,后来发现jQuery不支持图片上传(附件上传),但是有相关的插件,于是我开始慢慢琢磨,开始用另一个专门上传文件的插件jquery.ajaxfileupload.js,折腾了很久,总可以上传图片了。但是新的问题有产生了。
通过ajaxfileupload来异步上传图片的同时,却不能提交文本数据。囧啊…….
在网上查了很多资料,折腾了许久,没有Django开发的相关资料,怎么办?自己想办法…….
后来找到了解决方案,跟大家分享一下:
思路:
由于使用jquery.ajaxfileupload.js插件不能传递自定义的参数,肿么办?自己改写插件呗。碰巧,网上有别人改过的现成代码,二话不说,先拿来试试。以下即是我试验的过程。
1.前台页面(部分代码):
<tableborder="0"width="100%"> <formaction="."method="post"id="annex_form_2"></form> <tbody> <tr> <tdclass="col_name"nowrap="nowrap"width="26%">证书名称:</td> <tdwidth="64%"><inputsize="65"class="input_general"id="prove_name_2"maxlength="50"name="prove_name" type="text"></td> <tdnowrap="nowrap"width="7%"></td> <tdnowrap="nowrap"width="3%"><ahref="javascript:void(0);"onclick="SubmitAnnexInfo(2)"title="保存"><img src="/static/img/hr_manage/btn_save.gif"alt="点此保存"></a></td> </tr> <tr> <tdclass="col_name">证件类型:</td> <td><selectid="prove_type_2"name="prove_type"> <optionselected="selected"value="1">身份证</option> <optionvalue="2">学位证</option> <optionvalue="3">其他证</option> </select></td> <td></td> <td></td> </tr> <tr> <tdclass="col_name">证书描述:</td> <td><inputsize="80"class="input_general"id="prove_desc_2"maxlength="60"name="prove_desc"type="text"></td> <td></td> <td></td> </tr> <tr> <tdclass="col_name">附件地址:</td> <td><inputsize="45"class="input_general"id="prove_url_2"maxlength="45"name="prove_url"style="border:0px;" type="file"></td> <td></td> <td></td> </tr> <tr> <tdcolspan="4"> <hr> </td> </tr> </tbody> </table>
2.更改后的jquery.ajaxfileupload.js:
jQuery.extend({ createUploadIframe:function(id,uri) { //createframe varframeId='jUploadFrame'+id; if(window.ActiveXObject){ vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>'); if(typeofuri=='boolean'){ io.src='javascript:false'; } elseif(typeofuri=='string'){ io.src=uri; } } else{ vario=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); returnio }, createUploadForm:function(id,fileElementId,data) { //createform varformId='jUploadForm'+id; varfileId='jUploadFile'+id; varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>'); varoldElement=$('#'+fileElementId); varnewElement=$(oldElement).clone(); $(oldElement).attr('id',fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); //增加文本参数的支持 if(data){ for(variindata){ $('<inputtype="hidden"name="'+i+'"value="'+data[i]+'"/>').appendTo(form); } } //setattributes $(form).css('position','absolute'); $(form).css('top','-1200px'); $(form).css('left','-1200px'); $(form).appendTo('body'); returnform; }, ajaxFileUpload:function(s){ //TODOintroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout s=jQuery.extend({},jQuery.ajaxSettings,s); varid=newDate().getTime() varform=jQuery.createUploadForm(id,s.fileElementId,s.data); vario=jQuery.createUploadIframe(id,s.secureuri); varframeId='jUploadFrame'+id; varformId='jUploadForm'+id; //Watchforanewsetofrequests if(s.global&&!jQuery.active++) { jQuery.event.trigger("ajaxStart"); } varrequestDone=false; //Createtherequestobject varxml={} if(s.global) jQuery.event.trigger("ajaxSend",[xml,s]); //Waitforaresponsetocomeback varuploadCallback=function(isTimeout) { vario=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; }elseif(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; varstatus; try{ status=isTimeout!="timeout"?"success":"error"; //Makesurethattherequestwassuccessfulornotmodified if(status!="error") { //processthedata(runsthexmlthroughhttpDataregardlessofcallback) vardata=jQuery.uploadHttpData(xml,s.dataType); //Ifalocalcallbackwasspecified,fireitandpassitthedata if(s.success) s.success(data,status); //Firetheglobalcallback 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); } //Therequestwascompleted if(s.global) jQuery.event.trigger("ajaxComplete",[xml,s]); //HandletheglobalAJAXcounter if(s.global&&!--jQuery.active) jQuery.event.trigger("ajaxStop"); //Processresult 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 } } //Timeoutchecker if(s.timeout>0) { setTimeout(function(){ //Checktoseeiftherequestisstillhappening if(!requestDone)uploadCallback("timeout"); },s.timeout); } try { //vario=$('#'+frameId); varform=$('#'+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){ vardata=!type; data=type=="xml"||data?r.responseXML:r.responseText; //Ifthetypeis"script",evalitinglobalcontext if(type=="script") jQuery.globalEval(data); //GettheJavaScriptobject,ifJSONisused. if(type=="json") eval("data="+data); //evaluatescriptswithinhtml if(type=="html") jQuery("<div>").html(data).evalScripts(); //alert($('param',data).each(function(){alert($(this).attr('value'));})); returndata; } })
3.调用方法
//保存附件信息 functionSaveAnnexInfo(){ varprove_name=$("#id_prove_name").val();//从界面得到值 varprove_type=$("#id_prove_type").val(); varprove_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后台处理(代码片段)
ifannex_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() returnHttpResponse(1)#操作成功 returnHttpResponse(0)#操作失败
希望本文所述对大家的Python程序设计有所帮助。