JavaScript进阶 九 JS实现本地文件上传至阿里云服务器

               

JS实现本地文件上传至阿里云服务器

前言

      在前面的博客《 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 functionfunction(data){$scope.currentVersion = data.version;},//fail functionfunction(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 functionfunction(data) {alert("上传文件成功");},// fail functionfunction(data) {alert("上传文件失败:" + data.errtext);});} catch (error) {alert("G031:" + error.message);}};});

Html脚本

<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编码方式。那么接下来的工作就很好做了。按照之前图片处理的思路即可。

      期间自己也遇到了一部分问题。例如

<i id="appBase64" hidden="hidden"></i>

<i id="appName" hidden="hidden"></i>

      隐藏元素的位置，尽量将其置于靠近提交Buton的附近，否则在控制器中获取不到其内容。

      经过以上步骤，就可以实现将更新包上传至服务端相应更新文件夹中，同时将更新包版本号信息写入相应的version.txt文件内。

代码领悟

       将以上代码与之前做过的图片上传做对比，发现两者在数据获取时的方式是不同的，本文使用了HTML5之FileReader方法(点击查看详情)。之前做图片上传时应用此方法亦可以解决问题。两者写入服务端的方法是相同的，均是将Base64编码内容写入文件中。思路清晰了，问题自然会很容易得到解决。

进一步优化

      幸福永不满足，在以上文件上传过程中会遇到较大文件的上传，为此可能需要等待1min，甚至若干分钟，这是让人无法忍受的事情。为了增强用户的使用体验。特为文件上传增加进度条美化效果。详情见下篇博客。

参考文献

1.http://blog.youkuaiyun.com/sunhuaqiang1/article/details/50475429

2.http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/

3.http://blog.youkuaiyun.com/jackfrued/article/details/8967667

4.http://www.cnblogs.com/hema/archive/2009/10/21/1587560.html

5.http://www.108js.com/article/article7/70001.html?id=26

鸣谢

HTML5之FileReader的使用

美文美图

 

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow