在前面的部落格《 JavaScript進階(八)JS實作圖片預覽並匯入伺服器功能》(點選詳情)中,實作了JS將本機圖片檔案預覽並上傳至阿里雲伺服器的操作。這次需要實現將本地打包好的檔案上傳至阿里雲伺服器。使用前面的圖片檔案上傳方法無法完成此操作。操作介面如下:
本地與服務端傳輸檔案的格式應該是熟悉的Base64格式。首先需要將本機檔案轉換為Base64格式,傳送至服務端後,在服務端再將Base64格式的檔案轉換為原始檔案。
/*--------------移动APP版本管理G030 G031-------------------------*/ medModule.controller('VersionController',function($scope, $http){ $scope.queryFun = function() { try{ appCallServer($http,"G030",{"mangid":localStorage.mangid }, //success function function(data){ $scope.currentVersion = data.version; }, //fail function function(data){ //alert("未找到记录:"+data.errtext); }); }catch(error){ alert("G030:"+error.message); } }; $scope.queryFun(); // 上传文件 $scope.doTx = function() { var appBase64 = document.getElementById("appBase64").innerHTML; // 获取文件Base64编码内容 var sunny = document.getElementById("appName").innerHTML; // 获取文件名称(PS:瞬间感觉自己好聪明啊~~) var appName = sunny.substr(0, sunny.length-4); // 获取子字符串。 /*alert(appBase64); alert(appName);*/ if(appBase64.length == 0){ alert("请选择有效文件[该文件为空]"); } try { appCallServer($http, "G031", { "mangid" : localStorage.mangid, "appBase64": appBase64, "appVersion" : appName }, // success function function(data) { alert("上传文件成功"); }, // fail function function(data) { alert("上传文件失败:" + data.errtext); }); } catch (error) { alert("G031:" + error.message); } }; });
<script type="text/javascript"> function loadAppFile(source) { var file = source.files[0]; if (window.FileReader) { var fr = new FileReader(); // onloadend读取完成触发,无论成功或失败.如果读取失败,则 result的值为 null,否则即是读取的结果 fr.onloadend = function(e) { var content = e.target.result; if(content != null){ var arr = content.toString().split(","); // 将文件Base64编码内容传至页面 document.getElementById("appBase64").innerHTML = arr[1]; // 获取图片名称(PS:瞬间感觉自己好聪明啊~~) document.getElementById("appName").innerHTML = document.getElementById("appInput").files[0].name; /* alert(document.getElementById("appInput").files[0].name); alert(document.getElementById("appName").innerHTML); alert(document.getElementById("appBase64").innerHTML); */ } }; fr.readAsDataURL(file); } } </script>
/************************* 更新移动APP版本信息 *************************/ public static boolean do_G031(RequestMessage request,ResponseMessage response){ logger.info("\n\n------------Update_APP_G031 debug info-------------\n请求数据包信息:" + request.json.toString()); if(!Pubf.checkMangSession(request,response)){ return(false); } try{ String app,version; app = request.getString("appBase64").trim(); version = request.getString("appVersion").trim(); /*--------------------------- 将应用存进服务端 ---------------------------*/ if(!app.equals("")){ logger.info("开始写文件....."); FileUtil.GenerateApp(app, MyConst.APP_FILE_PATH + version + ".wgt"); logger.info("写文件完成....."); /*-------------------------将应用版本号写进版本文件--------------------------*/ logger.info("开始写入版本号....."); FileUtil.writeFile(MyConst.APP_VERSION_FILE_PATH, version); logger.info("写版本号完成....."); return(true); }else{ return(false); } }catch(Exception e){ e.printStackTrace(); response.errtext = "移动APP更新失败"; response.result = MyConst.ERR_FORMAT; return(false); } }
工具類別
<pre name="code" class="java">/** * * @param appStr 应用内容 * @param appFilePath 应用存放路径 * @return */ public static boolean GenerateApp(String appStr, String appFilePath) { // 对字节数组字符串进行Base64解码并生成wgt更新包 if (appStr == null) // 文件数据为空 return false; BASE64Decoder decoder = new BASE64Decoder(); try { // Base64解码 byte[] b = decoder.decodeBuffer(appStr); for (int i = 0; i < b.length; ++i) { if (b[i] < 0) {// 调整异常数据 b[i] += 256; } } // 生成wgt应用 OutputStream out = new FileOutputStream(appFilePath); out.write(b); out.flush(); out.close(); return true; } catch (Exception e) { return false; } }是我們之前所說的Base64編碼方式。那麼接下來的工作就很好做了。按照之前圖片處理的思路即可。 期間自己也遇到了一部分問題。例如
於靠近提交Buton的附近,否則在控制器中獲取不到其內容。
經過上述步驟,就可以實現將更新包上傳至服務端對應更新資料夾中,同時將更新包版本號資訊寫入對應的version.txt檔案內。
程式碼領悟
將上述程式碼與先前做過的圖片上傳做對比,發現兩者在資料取得時的方式是不同的,本文使用了HTML5之FileReader方法(點選檢視詳情)。之前做圖片上傳時應用此方法亦可解決問題。兩者寫入服務端的方法是相同的,都是將Base64編碼內容寫入檔案中。思路清晰了,問題自然會很容易解決。
進一步優化
美文美圖
以上就是JavaScript進階(九)JS實作本地檔案上傳至阿里雲端伺服器的內容,更多相關內容請關注PHPcn網路(www.php..S.
相關文章: