图片上传预览及上传后台"/>
图片上传预览及上传后台
用纯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”)方式获取上传的参数。
附文章中源码地址：
如果文章中有不正确的地方，欢迎大家指正！
更多推荐
图片上传预览及上传后台
发布评论