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程序设计有所帮助。