JS 实现图片预览并导入服务器功能

项目开发过程中，需要实现文件上传功能。借此机会学习之。

使用 HTML 中现有的 input type “file”可以支持这一功能。如下所示:

<input ng-model="url" id="url" type="file"/>

浏览时只显示指定文件类型

<input type="file" accept="application/msword" ><br><br>accept属性列表<br>   

• accept="application/msexcel"
  

• accept="application/msword"
  

• accept="application/pdf"
  

• accept="application/poscript"
  

• accept="application/rtf"
  

• accept="application/x-zip-compressed"
  

• accept="audio/basic"
  

• accept="audio/x-aiff"
  

• accept="audio/x-mpeg"
  

• accept="audio/x-pn/realaudio"
  

• accept="audio/x-waw"
  

• accept="image/gif"
  

• accept="image/jpeg"
  

• accept="image/tiff"
  

• accept="image/x-ms-bmp"
  

• accept="image/x-photo-cd"
  

• accept="image/x-png"
  

• accept="image/x-portablebitmap"
  

• accept="image/x-portable-greymap"
  

• accept="image/x-portable-pixmap"
  

• accept="image/x-rgb"
  

• accept="text/html"
  

• accept="text/plain"
  

• accept="video/quicktime"
  

• accept="video/x-mpeg2"
  

• accept="video/x-msvideo"     

下面的问题是：如何获得文件的上传路径，然后才能进行文件的读写后续操作。

下面是一个图片上传、预览的 Demo:

    oFReader.onload = function (oFREvent) {     if (!oPreviewImg) {         var newPreview = document.getElementById("imagePreview");         oPreviewImg = new Image();         oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";         oPreviewImg.style.height = (newPreview.offsetHeight).toString()+"px";         newPreview.appendChild(oPreviewImg);     }     oPreviewImg.src = oFREvent.target.result;     arr = oPreviewImg.src.toString().split(",");    alert(arr[0]);    alert(arr[1]);};

return function () {     var aFiles = document.getElementById("imageInput").files;     if (aFiles.length === 0) { return; }     if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image     file!"); return; }         oFReader.readAsDataURL(aFiles[0]);     } } if (navigator.appName === "Microsoft Internet Explorer") {     return function () {         alert(document.getElementById("imageInput").value);         document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;     } } })(); 

测试通过测试，可得到文件的格式、编码方式及编码内容，如下所示:

领悟 

通过阅读代码，可以获取到图片的格式与编码方式了。接下来就是文件的传输了。

经历了两天的屈辱、不甘、痛苦挣扎，自己最终还是顽强的站了起来。

晚上回到宿舍继续挣扎，慢慢思路得以理清：在获取到图片的 Base64 编码格式之后，自己就联想到了之前写过的文件传输代码了，当然之前写的都是一些基本的文件操作。由此，自己联想，在这使用最原始的文件传输方法应该也可以实现。

早晨到实验室，自己先尝试将图片的 Base64 编码传输至服务端，在服务端接收到客户端传输来的 Base64 编码后，采用 Base64Img 工具包(点击下载工具包)将 Base64 图片编码转换为图片格式，并保存至指定位置。初次尝试，将图片文件保存至本地是没有问题的。经过更改一些细微的细节问题，将程序部署在阿里云服务器上，经过测试，SUCCESS!

结语     

至此，自己的文件上传操作终于完成了，一路坎坷，一路心酸。

自己也曾尝试过使用 ng 插件 ng-file-upload(见参考文献 1)，但最终还是以失败而告终，真心没有搞明白代码，仿照源代码写就是没有效果，而且布局也不对，自己也是汗颜了。

自己接下来要突破的问题就是分页了，对于刚接触到的知识，往往不明觉厉。

​