jquery.uploadView.js图片上传插件

文件名 jquery.uploadView.js

// 图片上传前预览插件
//Power By 勾国印
//QQ:245629560
//Blog:http://www.gouguoyin.cn
(function($){  $.fn.uploadView = function(options){var defaults = {uploadBox: '.js_uploadBox', //设置上传框容器showBox : '.js_showBox', //设置显示预览图片的容器/*width : 200, //设置预览图片的宽度*/height: 240, //设置预览图片的高度allowType: ["gif", "jpeg", "jpg", "bmp", "png"], maxSize: 1, //设置允许上传图片的最大尺寸，单位Msuccess:$.noop //上传成功时的回调函数};var config = $.extend(defaults, options);var showBox = config.showBox;var uploadBox = config.uploadBox;var width = config.width;var height = config.height;var allowType = config.allowType;var maxSize = config.maxSize;var success = config.success;$(this).each(function(i){$(this).change(function(e){handleFileSelect($(this), width, height, allowType, maxSize, success);});});var handleFileSelect = function(obj, _w, _h, _type, _size, _callback){if (typeof FileReader == "undefined") {return false;}var thisClosest = obj.closest(uploadBox);if (typeof thisClosest.length == "undefined") {return;}var files = obj[0].files;var f = files[0];if (!isAllowFile(f.name, _type)) {alert("图片类型必须是" + _type.join("，") + "中的一种"); return false;}var fileSize = f.size;var maxSize = _size*1024*1024;if(fileSize > maxSize){alert('上传图片超出允许上传大小');return false;}var reader = new FileReader();reader.onload = (function(theFile){return function (e) {var tmpSrc = e.target.result;if (tmpSrc.lastIndexOf('data:base64') != -1) {tmpSrc = tmpSrc.replace('data:base64', 'data:image/jpeg;base64');} else if (tmpSrc.lastIndexOf('data:,') != -1) {tmpSrc = tmpSrc.replace('data:,', 'data:image/jpeg;base64,');}var img = '<img src="' + tmpSrc + '"/>';//consoleLog(reader, img);thisClosest.find(showBox).show().html(img);if (_w && _h) {cssObj = { 'width':_w+'px', 'height':_h+'px' };} else if (_w) {cssObj = { 'width':_w+'px' };} else if (_h) {cssObj = { 'height':_h+'px' };} else {cssObj = { 'max-width':'100%', 'max-height':'100%' };}thisClosest.find(showBox+" img").css( cssObj );_callback();};})(f)reader.readAsDataURL(f);}//获取上传文件的后缀名var getFileExt = function(fileName){if (!fileName) {return '';}var _index = fileName.lastIndexOf('.');if (_index < 1) {return '';}return fileName.substr(_index+1);};//是否是允许上传文件格式   var isAllowFile = function(fileName, allowType){var fileExt = getFileExt(fileName).toLowerCase();if (!allowType) {allowType = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];}if ($.inArray(fileExt, allowType) != -1) {return true;}return false;}       };})(jQuery);jQuery.extend({
unselectContents: function(){ if(window.getSelection) window.getSelection().removeAllRanges(); else if(document.selection) document.selection.empty(); }
});
jQuery.fn.extend({ selectContents: function(){ $(this).each(function(i){ var node = this; var selection, range, doc, win; if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined'){ range = doc.createRange(); range.selectNode(node); if(i == 0){ selection.removeAllRanges(); } selection.addRange(range); } else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())){ range.moveToElementText(node); range.select(); } }); }, setCaret: function(){ if(!$.browser.msie) return; var initSetCaret = function(){ var textObj = $(this).get(0); textObj.caretPos = document.selection.createRange().duplicate(); }; $(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret); }, insertAtCaret: function(textFeildValue){ var textObj = $(this).get(0); if(document.all && textObj.createTextRange && textObj.caretPos){ var caretPos=textObj.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue; } else if(textObj.setSelectionRange){ var rangeStart=textObj.selectionStart; var rangeEnd=textObj.selectionEnd; var tempStr1=textObj.value.substring(0,rangeStart); var tempStr2=textObj.value.substring(rangeEnd); textObj.value=tempStr1+textFeildValue+tempStr2; textObj.focus(); var len=textFeildValue.length; textObj.setSelectionRange(rangeStart+len,rangeStart+len); textObj.blur(); }else{ textObj.value+=textFeildValue; } }
});

使用方法如下：
首先下载源码，在模板页加入上传框，结构如下：

<div class="control-group js_uploadBox"><div class="btn-upload"><a href="javascript:void(0);"><i class="icon-upload"></i><span class="js_uploadText">上传</span>图片</a><input class="js_upFile" type="file" name="cover"></div><div class="js_showBox "><img class="js_logoBox" src="" width="100px" ></div></div>

复制代码
然后再引入插件jquery.uploadView.js（注意先后顺序，jquery必须要在插件之前引入）然后在模板页配置插件参数，配置如下

$(".js_upFile").uploadView({uploadBox: '.js_uploadBox',//设置上传框容器showBox : '.js_showBox',//设置显示预览图片的容器width : 100, //预览图片的宽度，单位pxheight : 100, //预览图片的高度，单位pxallowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型maxSize :2, //允许上传图片的最大尺寸，单位Msuccess:function(e){$(".js_uploadText").text('更改');alert('图片上传成功');}});

参考资料：
https://www.oschina.net/question/1789712_2138826
http://www.thinkphp.cn/code/1537.html
http://blog.csdn.net/lengxue789/article/details/43169965
http://www.oschina.net/project/tag/356/jquery-file-upload
http://www.open-open.com/lib/view/open1332648839546.html
http://blueimp.github.io/jQuery-File-Upload/
预览插件
http://www.gouguoyin.cn/demo/81.html

jquery.uploadView.js图片上传插件相关推荐

jquery.photoClip.js图片上传插件带拖动裁剪
下载地址 jquery.photoClip.js是一款图片上传插件,可以拖动选择裁剪的区域. dd:
php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...
think php上传图片,基于ThinkPHP5.0实现图片上传插件
这篇文章主要介绍了关于基于ThinkPHP5.0实现图片上传插件,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪 ...
php 上传图片控件,ThinkPHP5.0实现图片上传插件实例分享
thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪图片后会删除裁剪的原图片目录,以便减少空间.具体实现代码大家参考下本文,希望能帮助到大家. 效果预览图: 该插件主要功能是:可 ...
WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
java 图片上传控件_Javashop 图片上传插件使用指南
一.概述 Javashop 图片上传插件是一款基于WebUploader插件所封装的上传图片插件. 可用于快速生成上传图片页面,有如下特点: 基于freemarker指令模式所编写,只需一个指令,并且 ...
ajax图片上传插件demo,jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）...
这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章的一个收关.但是最初也是因为想做这么一个功能,一点一点的引发出了好多问题,不断去学习,研究,才写了这三篇. 早些时候已经实现了上 ...
jquery 分片上传php,jquery 大文件分片上传插件 fcup.js
软件介绍 fcup.js fcup 是一款支持大文件切片上传插件.该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度.. 安装直接下载源码,上传功能需要php环境,演示地 ...
Js 之移动端图片上传插件mbUploadify
一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...
bootstrap展示导入的图片_BootstrapFileInput 图片上传插件详解
插件描述:样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用 file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax ...

jquery.uploadView.js图片上传插件

jquery.uploadView.js图片上传插件相关推荐

最新文章

热门文章