用纯js实现图片在线预览功能，并增加提交后台代码，实现多个图片多次请求上传，具体使用再进行修改即可，需要引入jquery、layer、ajaxfileupload相关js文件，在非IE浏览器中可以实现点击图片展示大图的功能，IE浏览器下只可以预览，没有绑定点击事件。
一、html代码：
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>原生JS实现图片上传预览效果完美兼容各浏览器</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="viewImage.js"></script>
<link rel="stylesheet" type="text/css" href="viewImage.css">
</head>
<body>
<table>
<tr>
<td style="width:100px">选择图片：</td>
<td>
<a href="javascript:void(0)" class="file" style="float:left;margin-right:10px">选择文件
<input class="file" type="file" name="filePath" id="preFilePath" required="true" onchange="loadImageFile(this,3)"/>
</a>
<a href="javascript:void(0)" class="file">清空图片
<input class="file" type="button" onclick="clearImages('preFilePath')"/>
</a>
</td>
</tr>
</table>
<table>
<tr>
<td style="width:100px">图片预览：</td>
<td style="height:200px">
<ul id="preFilePathView" class="imgShow">
</ul>
</td>
</tr>
</table>
<a href="javascript:void(0)" class="file">提交
<input id="submitImg" class="file" type="button"/>
</a>
</body>
<script type="text/javascript">
$(document).ready(function(){
//重置上传图片内容
formDataJson={};
//清除图片相关信息
clearImages('preFilePath');
//提交方法路径
var uploadUrl='rest/xxx/xxx';
$('#submitImg').click(function(){
submitFiles(uploadUrl,{},function(){
alert('提交成功！')
});
})
})
</script>
</html>二、js代码：
/**
* 注意事项：
* 图片预览方法调用，id为当前上传图片的input控件id，预览图片的ul的id要写成id+View
* 需要调用css样式file与imgShow，需引用viewImages.css文件
* 在打开dialog的时候需要清空所有图片相关信息，并重置imagesFiles={}
* 支持在火狐、谷歌下点击图片显示大图，IE下只支持在线预览、不支持点击图片显示大图
* @author:LX
* @time 2017-08-01 09:40:20
*/
实例：
选择图片按钮
//<table>
// <tr>
// <td style="width:100px">选择图片：</td>
// <td>
// <a href="javascript:;" class="file" style="float:left;margin-right:10px">选择文件
// <input class="file" type="file" name="preFilePath" id="preFilePath" required="true" onchange="loadImageFile(this.id,5);"/>
// </a>
// <a href="javascript:;" class="file">清空图片
// <input class="file" type="button" onclick="clearImages('preFilePath')"/>
// </a>
// </td>
// </tr>
//</table>
图片预览：
//<table>
// <tr>
// <td style="width:100px">图片预览：</td>
// <td style="height:200px">
// <ul id="preFilePathView" class="imgShow">
// </ul>
// </td>
// </tr>
//</table>
var imageFiles = {};
//用于显示大图
var imgDatas = {};
//存放图片信息
var formDataJson = {};
var uploadFileID;
var tempNum= 0;
var loadImageFile = (function(uploadFile, num) {
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;
return function(uploadFile, num) {
uploadFileID = uploadFile.id;
var imgData = imgDatas[uploadFileID];
if (imgData == undefined) {
imgData = [];
}
var tempArr = formDataJson[uploadFileID];
if (tempArr != undefined && tempArr.length >= num) {
alert('最多上传' + num + '张图片');
return;
}
if (tempArr == undefined) {
tempArr = [];
}
oFReader.onload = function(oFREvent) {
var newPreview = document.getElementById(uploadFileID + "View");
var node = document.createElement("LI");
node.className = 'imgLi';
newPreview.appendChild(node);
oPreviewImg = new Image();
$(oPreviewImg).click(function (){
showBigImg(this);
});
oPreviewImg.style.width = "200px";
oPreviewImg.style.height = "200px";
node.appendChild(oPreviewImg);
oPreviewImg.src = oFREvent.target.result;
var tempJson = {};
tempJson['alt'] = '大图';
tempJson['pid'] = oFREvent.target.result;
tempJson['src'] = oFREvent.target.result;
tempJson['thumb'] = '';
imgData.push(tempJson);
imgDatas[uploadFileID] = imgData;
};
var aFiles = document.getElementById(uploadFileID).files;
if (aFiles.length === 0) {
return;
}
if (!rFilter.test(aFiles[0].type)) {
alert("请上传图片类型文件!");
return;
}
oFReader.readAsDataURL(aFiles[0]);
tempArr.push(uploadFile);
formDataJson[uploadFileID] = tempArr;
creatInput(uploadFile);
}
}
if (navigator.appName === "Microsoft Internet Explorer") {
return function(uploadFile, num) {
uploadFileID = uploadFile.id;
var tempArray = formDataJson[uploadFileID];
if (tempArray != undefined && tempArray.length >= num) {
alert('最多上传' + num + '张图片！');
return;
}
if (tempArray == undefined) {
tempArray = [];
}
var extArray = new Array(".gif", ".jpg", ".bmp", ".png", ".jpeg");
var file = document.getElementById(uploadFileID).value;
var file1 = file.slice(file.indexOf("\\") + 1);
var ext = file1.slice(file1.indexOf(".")).toLowerCase();
var allowSubmit = false;
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) {
allowSubmit = true;
break;
}
}
if (!allowSubmit) {
alert("请上传图片类型文件!");
return;
}
var node = document.createElement("LI");
node.className = 'imgLi';
document.getElementById(uploadFileID + 'View').appendChild(node);
node.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = file;
tempArray.push(uploadFile);
formDataJson[uploadFileID] = tempArray;
creatInput(uploadFile);
}
}
})();
//隐藏input创建新input
function creatInput(uploadFile) {
tempNum++;
$(uploadFile).hide();
var tempId = uploadFile.id;
$(uploadFile).attr('id', "temp" + tempNum);
var inputTemp = document.createElement("INPUT");
inputTemp.type = 'file';
inputTemp.name = 'filePath';
inputTemp.id = tempId;
$(inputTemp).addClass('file');
$(uploadFile).parent()[0].appendChild(inputTemp);
if ($(inputTemp)[0].onchange == null) {
$(inputTemp).on('change',
function() {
loadImageFile($(inputTemp)[0], 3);
});
}
}
//图片提交方法
function submitFiles(url, data, func) {
var loadingPross = layer.msg('提交中……', {
icon: 16,
shade: 0.01,
time: 0 //1000*60*60*24 //2秒关闭（如果不配置，默认是3秒）
});
for (var fileInputId in formDataJson) {
var formDataList = formDataJson[fileInputId];
for (var i = 0; i < formDataList.length; i++) {
var input = formDataList[i];//获取到图片文件
$.ajaxFileUpload({
url: url,
secureuri: false,
data: data,
fileElementId: input.id,
dataType: 'JSON',
success: function(result) {
var resultData = $.parseJSON(result);
if (resultData.success) {
if (func != undefined && func != '') {
func();
}
} else {
alert("上传失败");
}
},
error: function(result) {
alert("上传失败");
},
complete: function(XMLHttpRequest, textStatus) {
layer.close(loadingPross);
}
});
}
}
}
//删除所有图片
function clearImages(id) {
var bigImgArr = imgDatas[id];
if (bigImgArr != undefined && bigImgArr.length > 0) {
bigImgArr.splice(0, bigImgArr.length);
}
var formDataList = formDataJson[id];
if (formDataList != undefined && formDataList.length > 0) {
formDataList.splice(0, formDataList.length);
}
$('#' + id + 'View').off('click', 'li');
$('#'+id+'View').html('');
}
//显示大图
function showBigImg(file) {
var viewId=$(file).parents()[1].id;
var viewIndex=viewId.indexOf("View");
var id=viewId.substring(0,viewIndex);
var imgData = imgDatas[id];
var json = {
"title": "大图展示",
//相册标题
"id": id,
//相册id
"start": 0,
//初始显示的图片序号，默认0
"data": imgData
};
layer.photos({
photos: json,
//格式见API文档手册页
anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
});
}三、css代码：
@CHARSET "UTF-8";
.imgShow{
list-style:none;
}
.imgShow li{
margin-left:5px;
width: 200px;
height: 200px;
float: left;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
border:1px solid #a9c9e2;
background:#e8f5fe;
}
.file {
position: relative;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px; display:block;
width:100px;
text-align:center;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
width:130px;
height:30px;
background-color:#D0EEFF opacity:0.5;
filter:alpha(opacity=-250);
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}四、效果图：
IE下效果：
火狐下效果：
浏览器中都可以正确的现实图片
五、点击提交按钮进行图片提交，多张图片通过循环调用ajaxfileupload多次访问后台进行图片提交。①java代码中正常按照ajaxfileupload方式去接受即可。②注意接收图片文件的文件域为file控件的name属性值filePath。③因参数为表单方式提交，所以java中必须使用request.getParameter(“xx”)方式获取上传的参数。
附文章中源码地址：http://download.csdn.net/download/lxacdf/9932475
如果文章中有不正确的地方，欢迎大家指正！
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
