Django實現圖片文字同時提交的方法

 　　本文實例講述了Django實現圖片文字同時提交的方法。分享給大家供大家參考。具體分析如下：

　　jQuery為我們網站開發解決了很多問題，使我們的網站用戶體驗大大的提高了。舉個簡單的例子，我們用AJAX技術來實現對表單的異步提交，使用戶在體驗上有了很大的改觀，用戶在提交數據的同時還可以干一些其他的事情。

　　不過，今天在開發中遇到一個特別頭痛的問題，剛開始不知道，以為可以實現，糾結了將近4個小時之久，但結果很是令人失望。

　　問題是這樣的：為了提高用戶體驗，我決定使用AJAX異步提交，於是我用jQuery的$.post去異步提交表單數據，文本信息可以很輕松的提交，但是，卻怎麼也無法提交圖片數據。怎麼辦呢?

　　在網上查了很多資料，後來發現jQuery不支持圖片上傳(附件上傳)，但是有相關的插件，於是我開始慢慢琢磨，開始用另一個專門上傳文件的插件jquery.ajaxfileupload.js，折騰了很久，總可以上傳圖片了。但是新的問題有產生了。

　　通過ajaxfileupload來異步上傳圖片的同時，卻不能提交文本數據。囧啊…….

　　在網上查了很多資料，折騰了許久，沒有Django開發的相關資料，怎麼辦?自己想辦法…….

　　後來找到了解決方案，跟大家分享一下：

　　思路：

　　由於使用jquery.ajaxfileupload.js插件不能傳遞自定義的參數，腫麼辦?自己改寫插件呗。碰巧，網上有別人改過的現成代碼，二話不說，先拿來試試。以下即是我試驗的過程。

　　1. 前台頁面(部分代碼)：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <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：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 jQuery.extend({ createUploadIframe: function(id, uri) { //create frame va