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 变量类型及命名规则介绍
Jun 08 Python
Python中使用items()方法返回字典元素对的教程
May 21 Python
python根据日期返回星期几的方法
Jul 06 Python
举例讲解Python设计模式编程中的访问者与观察者模式
Jan 26 Python
python实现事件驱动
Nov 21 Python
python如何制作缩略图
Apr 30 Python
Django框架创建mysql连接与使用示例
Jul 29 Python
基于Python中isfile函数和isdir函数使用详解
Nov 29 Python
python中如何使用insert函数
Jan 09 Python
基于python实现计算且附带进度条代码实例
Mar 31 Python
Python发送邮件实现基础解析
Aug 14 Python
python中字典增加和删除使用方法
Sep 30 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
PHP SPL使用方法和他的威力
2013/11/12 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
微信小程序反编译的实现
2020/12/10 Javascript
Python操作mongodb数据库的方法详解
2018/12/08 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
基于Python测试程序是否有错误
2020/05/16 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
会计专业毕业生推荐信
2013/11/05 职场文书
店长助理岗位职责
2013/12/13 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
民族团结先进个人材料
2014/02/05 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
网络优化专员求职信
2014/05/04 职场文书
大学生见习报告范文
2014/11/03 职场文书
运动员代表致辞
2015/07/29 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS