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>