jQuery 图片上传前预览
使用jQuery 实现图片的本地预览，兼容现代浏览器与IE浏览器，可同时实现多图片预览，删除预览图片等
IE浏览器：对于IE使用滤镜来显示预览（DXImageTransform.Microsoft.AlphaImageLoader）
现代浏览器：使用load-image.all.min.js来预览图片，load-image是等比例缩放图片浏览插件
fileinput.css下载：fileinput.css
实现思路：定义一个table，td中定义一个input输入域，input的class为“input-image”表示为图片上传输出框，在页面加载完成，遍历“input-image”
调用initFilePreview方法初始化图片预览，第一个参数是input对象，sizes已存在图片的宽和高（sizes对于已存在的图片），width图片预览区域宽度，
height图片预览区域高度
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="fileinput.css" rel="stylesheet">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/blueimp-load-image/2.10.0/load-image.all.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<input name="tImage" type="hidden" class="input-image" style="width: 500px; height: 265px;">
</td>
</tr>
</table>
</body>
<script>
$(function() {
//遍历图片输出域
$(".input-image").each(function(){
var height = $(this).height();
var width = $(this).width();
var sizes = new Array();
$(this).nextAll("img").each(function() {
var sizeObj = {w:$(this).width(), h:$(this).height(), img:$(this)};
sizes.push(sizeObj);
});
//初始化图片预览区域
$.initFilePreview($(this), sizes, width, height);
});
})
// form upload image
jQuery.extend({
initFilePreview:function(inputImgObj, sizes, width, height) {
var fieldName = inputImgObj.attr("name");
var appendToObj = inputImgObj.parent("td");
var html ="<div class='file-preview' style='height: "+height+"px;width: "+width+"px;'>"
html+= "<div class='file-drop-zone'>";
html+= "<div class='file-preview-thumbnails file-preview-hbs' style='height:100%;width:"+(width - 20)+"px;'>";
html+= "</div>";
html+= "</div>";
html+= "<div class='fileinput-upload-button' style='width:100%;text-align:center;display:table;margin-top:3px;'>";
html+= "<button class='btn btn-success btn-squared fileinput-button' type='button' onclick=\"$.uploadImages(this, '"+fieldName+"')\">上传</button>";
html+= "<span class='btn btn-success btn-squared fileinput-button'>";
html+= "<span>选择图片</span>";
html+= "<input type='file' name='file_"+fieldName+"' onchange='$.selectedUploadImage(this, event)'>";
html+= "</span>";
html+= "</div>";
html+="</div>";
appendToObj.append(html);
$.initImagePreviewFrame(fieldName, sizes);
},
initImagePreviewFrame:function(inputName, sizes) {
var inputObj = $("input[type=hidden][name="+inputName+"]");
var imagePaths = inputObj.val();
if(imagePaths != "") {
var previewFrameDiv = inputObj.parent("td").find("div.file-preview-thumbnails");
var frameHeight = previewFrameDiv.height();
var height = Math.max(50, frameHeight-65);
if(!previewFrameDiv) {
return;
}
var imageArray = imagePaths.split(",");
var timeId = new Date().getTime();
for(var i = 0; i < imageArray.length; i++) {
var sizeObj = sizes[i];
var sizeH = sizeObj.h;
var sizeW = sizeObj.w;
var width = (height/sizeH) * sizeW;
previewFrameDiv.append($.createFilePreviewFrame(inputName, timeId + i, height, width));
imageObj = sizeObj.img;
var cloneImg = imageObj.clone()
cloneImg.width(width);
cloneImg.height(height);
cloneImg.show();
imageObj.remove();
$("#imagePreview-" + (timeId + i)).append(cloneImg);
$("#preview-" + (timeId + i)).attr("filePath", imageArray[i]);
}
}
},
createFilePreviewFrame:function(fieldName, id, height, width) {
var html = "<div class='file-preview-frame' id='preview-" + id + "'>";
html+= "<div id='imagePreview-"+ id +"' style='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale); width:"+width+"px; height: "+height+"px;'>";
html+= "</div>";
html+= "<div class='file-thumbnail-footer'>";
html+= "<div class='file-actions'>";
html+= "<div class='file-footer-buttons'>";
html+= "<button type='button' class='kv-file-remove btn btn-xs btn-default' title='删除文件' onclick=\"$.deleteFilePreviewFrame("+id+", '"+fieldName+"')\">";
html+= "<i class='fa fa-trash-o red icon-size-14'></i>";
html+= "</button>";
html+= "</div>";
html+= "</div>";
html+= "</div>";
html+= "</div>";
return html;
},
createFileinputButton:function(fieldName) {
var html = "<span class='btn btn-success btn-squared fileinput-button'>";
html+= "<span>选择图片</span>";
html+= "<input type='file' name='file_"+fieldName+"' onchange='$.selectedUploadImage(this, event)'>";
html+= "</span>";
return html;
},
deleteFilePreviewFrame:function(id, fieldName) {
var preview = $("#preview-" + id);
var filePath = preview.attr("filePath");
var previewFrameDiv = preview.parent(".file-preview-thumbnails");
//delete preview image
preview.remove();
//delete file upload button
$("#file-" + id).parent("span").remove();
$.deleteImage(previewFrameDiv, fieldName);
},
selectedUploadImage:function(obj, e) {
var timeId = new Date().getTime();
var fileObj = $(obj);
fileObj.attr("id", "file-" + timeId);
var fileName = fileObj.attr("name");
var fieldName = fileName.substring("file_".length, fileName.length);
var btnDiv = fileObj.closest(".fileinput-upload-button");
btnDiv.append($.createFileinputButton(fieldName));
var previewFrameDiv = fileObj.closest(".fileinput-upload-button").prev().find(".file-preview-thumbnails");
var frameHeight = previewFrameDiv.height() - 35;
var frameWidth = previewFrameDiv.width() - 20;
var height = Math.max(50, frameHeight);
var width = Math.max(50, frameWidth)/2;
previewFrameDiv.append($.createFilePreviewFrame(fieldName, timeId, height, width));
$.displayPreviewImage(timeId, e, height, width);
//hide current file button
fileObj.parent("span").hide();
},
displayPreviewImage:function(id, e, height, width) {
if(!$.support.leadingWhitespace){
var obj = document.getElementById("file-" + id);
obj.select();
var path = document.selection.createRange().text;
var sizes = $.getIePreviewImageSize(id, path);
var hPercent = height/sizes[1];
var width = hPercent * sizes[0];
var picpreview=document.getElementById("imagePreview-" + id);
try{
picpreview.style.width = width;
picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
} catch (ex){
alert("file path error!");
return false;
}
} else {
var file = e.target.files[0];
loadImage(
file,
function(img) {
$("#imagePreview-" + id).prepend(img);
},
{maxWidth: width, maxHeight:height}
);
}
},
getIePreviewImageSize:function(id, path) {
var picpreview=document.getElementById("imagePreview-" + id);
var tempDiv=document.createElement("div");
picpreview.appendChild(tempDiv);
tempDiv.style.width="10px";
tempDiv.style.height="10px";
tempDiv.style.diplay="none";
tempDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);";
tempDiv.id="previewTemp";
tempDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=path;
var width=tempDiv.offsetWidth;
var height=tempDiv.offsetHeight;
picpreview.removeChild(tempDiv);
var sizes = new Array();
sizes.push(width);
sizes.push(height);
return sizes;
},
uploadImages:function(obj, fileName) {
var flag = false;
$("input[type='file'][name='file_"+fileName+"']").each(function(){
var fileName = $(this).val();
if(fileName != "" && (fileName.endWith(".png") || fileName.endWith(".PNG") ||
fileName.endWith(".jpg") || fileName.endWith(".JPG") || fileName.endWith(".jpeg") || fileName.endWith(".JPEG")
|| fileName.endWith(".bmp") || fileName.endWith(".BMP") || fileName.endWith(".gif") || fileName.endWith(".GIF"))) {
flag = true;
}
});
if(!flag) {
layer.alert('请选择图片上传!', {icon: 0});
return false;
}
var fileObj = $(obj).closest(".fileinput-upload-button").prev();
var previewFrameDiv = fileObj.find(".file-preview-thumbnails");
var hiddenInput = $("input[type=hidden][name="+fileName+"]");
var loadIdx = layer.load();
$.ajaxFileUpload({
url:form.uploadUrl,
secureuri:false,
fileElementName:"file_" + fileName,
dataType: 'json',
success: function(data, status){
layer.close(loadIdx);
if(data.code == 411) {
layer.alert('图片最大不能超过' + data.error, {icon: 0});
return false;
}
var imageData = data.value;
layer.msg('图片上传成功', {time: 1000, shadeClose:true});
var filePaths = "";
var index = 0;
previewFrameDiv.find(".file-preview-frame").each(function(){
if(!$(this).attr("filePath") && index < imageData.length) {
$(this).attr("filePath", imageData[index]);
index ++;
}
filePaths += $(this).attr("filePath");
filePaths += ",";
});
if(filePaths.length > 1) {
filePaths = filePaths.substring(0, filePaths.length - 1);
}
hiddenInput.val(filePaths);
}, error: function (data, status, e) {
layer.close(loadIdx);
layer.alert('上传失败!', {icon: 0});
}
});
return false;
},
deleteImage:function(previewFrameDiv, fileName) {
var hiddenInput = $("input[type=hidden][name="+fileName+"]");
var filePaths = "";
previewFrameDiv.find(".file-preview-frame").each(function(){
if($(this).attr("filePath")) {
filePaths += $(this).attr("filePath");
filePaths += ",";
}
});
if(filePaths.length > 1) {
filePaths = filePaths.substring(0, filePaths.length - 1);
}
hiddenInput.val(filePaths);
}
});
</script>
</html>