JavaScript进阶(八)JS实现图片预览并导入服务器功能
JS实现导入文件功能
)项目开发过程中，需要实现文件上传功能。借此机会学习之。
使用HTML中现有的input type “file”可以支持这一功能。如下所示:
<input ng-model="url" id="url" type="file"/>
浏览时只显示指定文件类型
<input type="file" accept="application/msword" ><br><br>accept属性列表<br>
1.accept="application/msexcel"
2.accept="application/msword"
3.accept="application/pdf"
4.accept="application/poscript"
5.accept="application/rtf"
6.accept="application/x-zip-compressed"
7.accept="audio/basic"
8.accept="audio/x-aiff"
9.accept="audio/x-mpeg"
10.accept="audio/x-pn/realaudio"
11.accept="audio/x-waw"
12.accept="image/gif"
13.accept="image/jpeg"
14.accept="image/tiff"
15.accept="image/x-ms-bmp"
16.accept="image/x-photo-cd"
17.accept="image/x-png"
18.accept="image/x-portablebitmap"
19.accept="image/x-portable-greymap"
20.accept="image/x-portable-pixmap"
21.accept="image/x-rgb"
22.accept="text/html"
23.accept="text/plain"
24.accept="video/quicktime"
25.accept="video/x-mpeg2"
26.accept="video/x-msvideo"
下面的问题是：如何获得文件的上传路径，然后才能进行文件的读写后续操作。
下面是一个图片上传、预览的Demo:
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
if (window.FileReader) {
var oPreviewImg = null, oFReader = new window.FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
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;
}
}
})();
</script>
<style type="text/css">
#imagePreview {
width: 160px;
height: 120px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
</head>
<body>
<div id="imagePreview">
</div>
<form name="uploadForm">
<p>
<input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
<input type="submit" value="Send" /></p>
</form>
</body>
</html>
测试
通过测试，可得到文件的格式、编码方式及编码内容，如下所示:
领悟
通过阅读代码，可以获取到图片的格式与编码方式了。接下来就是文件的传输了。
经历了两天的屈辱、不甘、痛苦挣扎，自己最终还是顽强的站了起来。
晚上回到宿舍继续挣扎，慢慢思路得以理清：在获取到图片的Base64编码格式之后，自己就联想到了之前写过的文件传输代码了，当然之前写的都是一些基本的文件操作。由此，自己联想，在这使用最原始的文件传输方法应该也可以实现。
早晨到实验室，自己先尝试将图片的Base64编码传输至服务端，在服务端接收到客户端传输来的Base64编码后，采用Base64Img工具包(点击下载工具包)将Base64图片编码转换为图片格式，并保存至指定位置。初次尝试，将图片文件保存至本地是没有问题的。经过更改一些细微的细节问题，将程序部署在阿里云服务器上，经过测试，SUCCESS!
核心代码
html
<div style="padding-top: 15px"> <label for="pic">更新广告图片 :</label> <!-- <a class="btn btn-warning btn-sm" id="choice" ng-click="doChoice()" style="font-size:14px; color:red; font-family:微软雅黑; border-radius: 9px;">选择文件</a> --> <input id="imageInput" type="file" accept="image/jpeg" onchange="loadImageFile();" /> <i id="img" hidden="hidden"></i> <i id="imgName" hidden="hidden"></i> </div>
javaScript
arr = oPreviewImg.src.toString().split(",");
document.getElementById("img").innerHTML = arr[1];
document.getElementById("imgName").innerHTML = document.getElementById("imageInput").files[0].name;
//alert(document.getElementById("img").innerHTML);
//alert(document.getElementById("imageInput").files[0].name);// 获取 图片名称(PS:瞬间感觉自己好聪明啊~~)
//alert(arr[0]);// 获取图片格式与编码方式
//alert(arr[1]);// 获取图片Base 64编码字节
程序截图
客户端顶部显示广告信息：
服务端广告管理界面:
服务端修改广告信息界面:
结语
至此，自己的文件上传操作终于完成了，一路坎坷，一路心酸。
自己也曾尝试过使用ng插件ng-file-upload(见参考文献1)，但最终还是以失败而告终，真心没有搞明白代码，仿照源代码写就是没有效果，而且布局也不对，自己也是汗颜了。
自己接下来要突破的问题就是分页了，对于刚接触到的知识，往往不明觉厉。
参考文献
1.https://github.com/danialfarid/ng-file-upload
2.http://www.cnblogs.com/wolf-sun/p/4781673.html
3.http://jsfiddle.net/danialfarid/maqbzv15/544/#update
4.http://www.tuicool.com/articles/jQrQnmf
JavaScript进阶(八)JS实现图片预览并导入服务器功能的更多相关文章
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
- js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- Jquery OR Js 实现图片预览
Jquery方法一: <!DOCTYPE html> <html> <head> <title></title> <s ...
随机推荐
- lucene全文检索基础
全文检索是一种将文件中所有文本与检索项匹配的文字资料检索方法.比如用户在n个小说文档中检索某个关键词,那么所有包含该关键词的文档都返回给用户.那么应该从哪里入手去实现一个全文检索系统?相信大家都听说过 ...
- Dynamics CRM 不同的站点地图下设置默认不同的仪表板
CRM的默认仪表板只能设置一个,也就是说每个引用仪表板的站点地图下点开仪表板后都是看到的默认仪表板,例如我下图中的"日常维修仪表板" 那如果我要在不同的站点地图下看到的默认仪表板不 ...
- 使用Apache的ab进行压力测试
概述 ab是apache自带的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab然后进行apache 负载压力测试. 后台测试开发中,常用的压力测试服务,php一般选择xampp,下 ...
- 自制Linux 终端 锁屏防窃助手
很多时候我们不能一直守护在自己的电脑旁边,而且有些文件并不想让别人知道.那么这时候来个锁屏,是再合适不过的了.今天分享一个自制的锁屏工具,如下. 准备 操作系统 : 我这里是ElementaryOS虚 ...
- JDK的安装以及配置
JDK的安装以及配置 JDK(Java Development Kit),顾名思义,是 Java 语言的软件开发工具包(SDK). Android发开使用Java语言,所以装JDK是Android开发 ...
- JDBC的使用五大步骤以及查询操作-数据库编程（二）
jdbc的使用步骤 1.加载jdbc的驱动. 2.打开数据库的连接. 3.建立一个会话,然后执行增删改查等基本的操作. 4.对结果进行处理 5.对环境进行清理,比如关闭会话等. 查询操作 首先用Cla ...
- Python pygame安装过程笔记
今天看到一个教程,是关于Python安装pygame模块的.觉得很好,拿来分享一下. 安装Python 额,这个小题貌似在这里很是多余啊.但是为了照顾到刚刚学习Python的童鞋,我还是多啰嗦两句吧. ...
- 编译GDAL支持MySQL
GDAL支持MySQL需要MySQL的库才可以,编译很简单,修改nmake.opt文件中对应的MySQL的库的路径和lib即可. nmake.opt文件中397行左右,如下: # MySQL Libr ...
- 插件前奏-android黑科技 hook介绍
转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52091833 Android hook相关学习 参考:http://www.cydia ...
- 【一天一道LeetCode】#205. Isomorphic Strings
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...