ajax異步上傳圖片文件并將其轉換為base64格式

高級瀏覽器上面，可以直接使用html5的FileReader，實現獲取上傳文件的base64格式，并以字符串形式提交。對于IE9以下的瀏覽器，就得另想他法。下面是高級瀏覽器的示例代碼。

$('.image').change(function(e) {var target = $(e.target);var file;if(target[0].files && target[0].files[0] ) {file = target[0].files[0];}if(file) {var reader = new FileReader();reader.onload = function(evt){var imgstr = evt.target.result; //這就是base64字符串}; reader.readAsDataURL(file);} });

1、ajax異步上傳文件

使用了jquery.form插件。該插件的原理，是創建了一個隱藏的iframe，來作為iframe提交文件的跳轉地址。將form的target屬性設置為該iframe，則返回結果將在iframe中顯示。這個過程可以自己實現，也可以借助jquery的form插件實現。下面的代碼是借助了插件。
html代碼如下。添加了一個按鈕，用來做提交測試，也可換為其他觸發方式。

<form id="postForm" action= "uploadBack.jsp" method= "post"><ul><li><span>img:</span><input id="img" name="img" type="file" accept=".jpg"></li><li><a href="javascript:void(0);">提交</a></li></ul> </form>

js代碼如下。成功和失敗方法可以自行定義。

$('a').click(function() {var options = {dataType: 'json',success: getResult,error: showError}$('#postForm').ajaxSubmit(options); });

2、服務端接收2進制圖片
直接從服務端讀取輸入流，得到的并不是僅僅是圖片流，還夾雜了其他信息。如果獲取圖片流，需要先將其他信息去掉。下面是代碼，可以將獲取的圖片流輸出到本地，存為一張相同的圖片。

ServletInputStream in = request.getInputStream(); int result; OutputStream out = new FileOutputStream("E:/TEST/2.jpg"); byte[] buffer = new byte[1024]; result = in.readLine(buffer,0,buffer.length); //讀取boundary result = in.readLine(buffer,0,buffer.length); //讀取Content-Disposition result = in.readLine(buffer,0,buffer.length); //讀取Content-Type; result = in.readLine(buffer,0,buffer.length); //讀取空行; int length = -1; while ((length = in.read(buffer)) != -1) {out.write(buffer, 0, length); } in.close(); out.close();

3、將2進制圖片流轉為base64格式字符串
2進制流先存入byte[]數組，然后利用sun.misc.BASE64Encoder包即可轉成。將流存入數組時，中途遇到沒有讀取完整的數據，從而使得得到的字符串不是完整的圖片，后又換為循環讀取，才得到視覺無損圖。另外，得到的base字符串中，可能含有換行等特殊符號，保險起見，處理一下。代碼如下,變量接上段代碼。

ByteArrayOutputStream outstream = new ByteArrayOutputStream(); byte[] buff = new byte[100]; //buff用于存放循環讀取的臨時數據 int rc = 0; while ((rc = in.read(buff, 0, 100)) > 0) { outstream.write(buff, 0, rc); } byte[] data = outstream.toByteArray(); in.close(); BASE64Encoder encoder = new sun.misc.BASE64Encoder(); String base64str = encoder.encodeBuffer(data).trim(); base64str = base64str.replaceAll("[\\t\\n\\r]", "");

總結一下，感覺腦子長時間不用，就是有點秀逗了，人也懶了，解決問題的周期也變長了，以后還得勤動腦勤動手。另外，谷歌果然比百度好用太多。

轉載地址：http://www.cnblogs.com/newyear/p/6001493.html

總結

以上是生活随笔為你收集整理的ajax异步上传图片文件并将其转换为base64格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。