Django实现图片文字同时提交的方法


Posted in Python onMay 26, 2015

本文实例讲述了Django实现图片文字同时提交的方法。分享给大家供大家参考。具体分析如下:

jQuery为我们网站开发解决了很多问题,使我们的网站用户体验大大的提高了。举个简单的例子,我们用AJAX技术来实现对表单的异步提交,使用户在体验上有了很大的改观,用户在提交数据的同时还可以干一些其他的事情。

不过,今天在开发中遇到一个特别头痛的问题,刚开始不知道,以为可以实现,纠结了将近4个小时之久,但结果很是令人失望。

问题是这样的:为了提高用户体验,我决定使用AJAX异步提交,于是我用jQuery的$.post去异步提交表单数据,文本信息可以很轻松的提交,但是,却怎么也无法提交图片数据。怎么办呢?

在网上查了很多资料,后来发现jQuery不支持图片上传(附件上传),但是有相关的插件,于是我开始慢慢琢磨,开始用另一个专门上传文件的插件jquery.ajaxfileupload.js,折腾了很久,总可以上传图片了。但是新的问题有产生了。

通过ajaxfileupload来异步上传图片的同时,却不能提交文本数据。?灏 ??

在网上查了很多资料,折腾了许久,没有Django开发的相关资料,怎么办?自己想办法…….

后来找到了解决方案,跟大家分享一下:

思路:

由于使用jquery.ajaxfileupload.js插件不能传递自定义的参数,肿么办?自己改写插件呗。碰巧,网上有别人改过的现成代码,二话不说,先拿来试试。以下即是我试验的过程。

1. 前台页面(部分代码):

<table border="0" width="100%"> 
  <form action="." method="post" id="annex_form_2"></form> 
  <tbody> 
  <tr> 
    <td class="col_name" nowrap="nowrap" width="26%">证书名称:</td>
    <td width="64%"><input size="65" class="input_general" id="prove_name_2" maxlength="50" name="prove_name" 
                type="text"></td> 
    <td nowrap="nowrap" width="7%"></td> 
    <td nowrap="nowrap" width="3%"><a href="javascript:void(0);" onclick="SubmitAnnexInfo(2)" title="保存"><img 
        src="/static/img/hr_manage/btn_save.gif" alt="点此保存"></a></td> 
  </tr> 
  <tr> 
    <td class="col_name">证件类型:</td> 
    <td><select id="prove_type_2" name="prove_type"> 
      <option selected="selected" value="1">身份证</option> 
      <option value="2">学位证</option> 
      <option value="3">其他证</option> 
    </select></td> 
    <td> </td> 
    <td> </td> 
  </tr> 
  <tr> 
    <td class="col_name">证书描述:</td> 
    <td><input size="80" class="input_general" id="prove_desc_2" maxlength="60" name="prove_desc" type="text"></td> 
    <td> </td> 
    <td> </td> 
  </tr> 
  <tr> 
    <td class="col_name">附件地址:</td> 
    <td><input size="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> 
    <td colspan="4"> 
      <hr> 
    </td> 
  </tr> 
  </tbody> 
</table>

2. 更改后的jquery.ajaxfileupload.js:

jQuery.extend({ 
  createUploadIframe: function(id, uri) 
   { 
        //create frame 
      var frameId = 'jUploadFrame' + id; 
      if(window.ActiveXObject) { 
        var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); 
        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 = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></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) { 
          $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').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("<div>").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程序设计有所帮助。

Python 相关文章推荐
Python笔记(叁)继续学习
Oct 24 Python
Python中的赋值、浅拷贝、深拷贝介绍
Mar 09 Python
Python读写配置文件的方法
Jun 03 Python
Python 列表理解及使用方法
Oct 27 Python
用Python写一段用户登录的程序代码
Apr 22 Python
使用pandas把某一列的字符值转换为数字的实例
Jan 29 Python
对Python中TKinter模块中的Label组件实例详解
Jun 14 Python
Python常用数据类型之间的转换总结
Sep 06 Python
python 魔法函数实例及解析
Sep 25 Python
使用Pandas将inf, nan转化成特定的值
Dec 19 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
May 15 Python
Python制作一个仿QQ办公版的图形登录界面
Sep 22 Python
Python实现的简单算术游戏实例
May 26 #Python
Django中使用group_by的方法
May 26 #Python
python3序列化与反序列化用法实例
May 26 #Python
python实现用于测试网站访问速率的方法
May 26 #Python
Python函数可变参数定义及其参数传递方式实例详解
May 25 #Python
Python易忽视知识点小结
May 25 #Python
Python中类型关系和继承关系实例详解
May 25 #Python
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
输出控制类
2006/10/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python lxml中etree的简单应用
2019/05/10 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
超市营业员岗位职责
2013/12/20 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
给校长的建议书500字
2014/05/15 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
php引用传递
2021/04/01 PHP
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python