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中getattr函数使用方法 getattr实现工厂模式
Jan 20 Python
Python中运行并行任务技巧
Feb 26 Python
python中map、any、all函数用法分析
Apr 21 Python
使用Python的Flask框架来搭建第一个Web应用程序
Jun 04 Python
python爬虫入门教程--优雅的HTTP库requests(二)
May 25 Python
flask + pymysql操作Mysql数据库的实例
Nov 13 Python
使用requests库制作Python爬虫
Mar 25 Python
基于Django框架利用Ajax实现点赞功能实例代码
Aug 19 Python
详解Python 定时框架 Apscheduler原理及安装过程
Jun 14 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
Jan 03 Python
Python操控mysql批量插入数据的实现方法
Oct 27 Python
Python排序算法之插入排序及其优化方案详解
Jun 11 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
js资料toString 方法
2007/03/13 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python如何实现定时器功能
2020/05/28 Python
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
2014年大学学生会工作总结
2014/12/02 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
企业法人任命书
2015/09/21 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Redis 异步机制
2022/05/15 Redis
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技