html上传图片预览,jquery实现

来源：互联网发布：编程编辑：程序博客网时间：2024/05/16 05:43

想必大家在做图片上传时大部分都会在图片没有上传之前先进行本地预览，事情说起来简单，但是由于各大浏览器都有各自安全机制，需要实现图片预览就变得有点小麻烦，本文便是介绍笔者利用jquery实现在不同浏览器在图片上传时进行预览的jquery插件。现在分享给大家参考，如有任何改进或建议请一定要为笔者指出。(插件使用需要引入jquery)

js文件jqueryExtends.js

$.fn.extend({/** * 图片上传本地预览 * 参数说明： * imgId：image节点对象(必填) * imgType：图片格式限制数组(可选) * callBack：回调函数(可选) * message：图片格式错误时是否弹出消息(可选boolean) */imgPreview:function(imgId,imgType,callBack,message){var url = $(this).val();var opts = {imgType:["jpg","jpeg","gif","png","bmp"],message:function(statu){if(statu){alert("您选择的图片有误，仅支持" + this.imgType.join("、") + "图片格式上传！");}},callBack:function(data){}};//如果省略了参数，则进行参数转换if($.isFunction(imgType)){callBack = imgType;imgType = opts.imgType;}else if($.type(imgType) === "boolean"){message = imgType;imgType = opts.imgType;callBack = opts.callBack();}if($.type(callBack) === "boolean"){message = callBack;callBack = opts.callBack();}if(message === undefined){message = true;}//合并对象opts = $.extend(opts,{"imgType":imgType,"callBack":callBack});//图片格式验证if (!RegExp("\.(" + opts.imgType.join("|").toLowerCase() + ")$", "i").test(url.toLowerCase())) {//执行回调函数             opts.callBack(false);             //清空file             this.defaultValue = "";            //消息提示             opts.message(message);             return false;    }var img = $("#" + imgId);//IE下if($.browser.msie){//使用滤镜this.select(); url = document.selection.createRange().text;//创建一个div设置背景作为图片预览var newPreview = document.createElement("div");newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; newPreview.style.width = img.width();newPreview.style.height = img.height();//使用div标签替换img标签img.replaceWith(newPreview);//使用图片newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;//other}else{if(this[0].files){var file = this[0].files[0];if (window.URL != undefined) {           url = window.URL.createObjectURL(file);        }else if(window.webkitURL != undefined){        url = window.webkitURL.createObjectURL(file);        }}        img.attr("src",url);}//执行回调函数opts.callBack(true);return true;}});

使用方法

<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" src="js/jquery-1.8.3.js" ></script><script type="text/javascript" src="js/jqueryExtends.js" ></script><title></title></head><script>function imgPreview(file){//调用插件$(file).imgPreview("img");}</script><body><center><div><img src="" id = "img" width="150" height="200"/></div><input type="file" style="width: 150px;" onchange="imgPreview(this)"/></center></body></html>

简单粗暴有木有，本文例子只使用了一个参数，其它参数的使用，大家可自行尝试。

0 0