一个图片上传插件，含图片上传后生成预览图片

发布一个图片上传插件，带图片上传后生成预览图片

插件代码：

/*** zx-upload.js v1.0.0* 上传插件* http://www.*.com/** Copyright 2018-2028 zxhj963** Released on: 2018/7/21*/; (function ($, window, document, undefined) {    "use strict";var defaults = {isLayer:true,maxCount: 5,curCount: 0,urls: '',limitWidth: 500,limitHeight: 500,viewWidth: 80,viewHeight: 80,errViewImg:'../images/noimage.gif',savePath: '/upload/upload/upload/',saveServerUrl: "uploadBase64Img.asp"};function Upload($ele, options) {this.$ele = $ele;this.options = $.extend({}, defaults, options);console.log(this.options)this.init();}Upload.prototype = {constructor: Upload,init: function () {this.renderViewBox();this.bindAddEven();this.bindEditEven();this.bindDelEven();},clearViewItem: function () {this.$ele.find('.view-item').remove();  //清除所有的view-item},showUploadBtn: function () {this.$ele.children('.zx-view-box').children('label.button').show(); //显示上传按钮},hideUploadBtn: function () {this.$ele.children('.zx-view-box').children('label.button').hide(); //隐藏上传按钮},resizeImgSize: function (originWidth, originHeight, maxWidth, maxHeight) {var targetWidth = originWidth, targetHeight = originHeight;if (originWidth > maxWidth || originHeight > maxHeight) {if (originWidth / originHeight > maxWidth / maxHeight) {// 更宽，按照宽度限定尺寸targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));} else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));}}else {targetWidth = originWidth;targetHeight = originHeight;}return {w: targetWidth,h: targetHeight}},getImageSize: function (url,callback) {var img = new Image();img.src = url;// 如果图片被缓存，则直接返回缓存数据if (img.complete) {var ret =  {w: img.width,h: img.height};callback(ret)} else {// 完全加载完毕的事件img.onload = function () {var ret = {w: img.width,h: img.height};callback(ret)}}return ret;},getImgUrlBase64: function (imageObj, targetSize) {var canvas = document.createElement('canvas');//创建预览图片canvas.width = targetSize.w;canvas.height = targetSize.h;var ctx = canvas.getContext("2d");ctx.clearRect(0, 0, canvas.width, canvas.height);         // 清除画布ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);var Img64 = canvas.toDataURL();   // 压缩后的base64串return Img64;},getInputUrls: function () {//获取文本框中的链接和链接数量var that = this,urls = that.$ele.children('input.zx-urlInput').val(),urls_arr = urls.split(','),counts = (urls == '') ? 0 : urls_arr.length,maxCount = this.options.maxCount;if (counts >= maxCount) {var temp_arr = [];urls_arr.forEach(function (e, i) {if (i < maxCount) { temp_arr.push(e); }});urls = temp_arr.join(',');counts = maxCount;that.hideUploadBtn();}else {that.showUploadBtn();}that.$ele.children('input.zx-urlInput').val(urls);return {urls: urls,counts: counts};},renderViewBox: function () {var that = this;that.clearViewItem(); var curUrls = that.getInputUrls().urls;var curCount = that.getInputUrls().counts;if (curCount > 0) {var arr_Urls = curUrls.split(',');arr_Urls.forEach(function (e, i) {if (i < that.options.maxCount) {var viewImg64 = that.options.errViewImg;var viewItemHtml = '<div class="view-item"><img src="' + viewImg64 + '" /><div class="admin-box"><a href="javascript:void(0);"  class="edit-btn" data-inputName="pic_1">编辑</a> | <a href= "javascript:void(0);"  class="del-btn" >删除</a></div></div>';that.$ele.children('.zx-view-box').append(viewItemHtml);//e为文本框中的图片链接地址,需转换成viewImg64的预览图片地址that.getImageSize(e, function (ret) {var viewImg64Size = that.resizeImgSize(ret.w, ret.h, that.options.viewWidth, that.options.viewHeight);var imgView = new Image();imgView.src = e;imgView.onload = function () {var viewImg64 = '';if (imgView.fileSize > 0 || (imgView.width > 0 && imgView.height > 0)) {viewImg64 = that.getImgUrlBase64(imgView, viewImg64Size)} else {viewImg64 = that.options.errViewImg;}that.$ele.children('.zx-view-box').find('.view-item').eq(i).children('img').attr('src', viewImg64);}});} else {}});}},bindAddEven: function () {var that = this; var newUrls = '', msg='';that.$ele.children('.zx-view-box').on('change', '.zx-fileInput', function () {var curUrls = that.getInputUrls().urls;var curCount = that.getInputUrls().counts;newUrls = curUrls;if (curCount >= that.options.maxCount) {return false;}else {var file = this.files[0];var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;if (!rFilter.test(file.type)) {if (that.options.isLayer) {msg = '数据错误，提交的数据不是文件！';if (that.options.isLayer) {layer.alert(msg, { icon: 2 });} else {alert(msg);}} else {msg = '文件格式不正确！';if (that.options.isLayer) {layer.alert(msg, { icon: 2 });} else {alert(msg);}}return false;}else {if (!!file) {//是图片文件，开始上传到服务器var reader = new FileReader();reader.readAsDataURL(file);  // 图片文件转换为base64reader.onload = function () {   // 文件加载完成var def_url = this.result;  //图片原图的base64链接  var image = new Image();image.src = def_url;image.onload = function () {var originWidth = this.width, originHeight = this.height;   // 图片原始尺寸var limitWidth = that.options.limitWidth, limitHeight = that.options.limitHeight;    // 保存图片的最大尺寸限制var targetSize = that.resizeImgSize(originWidth, originHeight, limitWidth, limitHeight);   // 图片尺寸超过限制，调整尺寸var targetImg64 = that.getImgUrlBase64(image, targetSize);var formData = new FormData();formData.append("imgUrl", targetImg64);formData.append("savePath", that.options.savePath);$.ajax({type: "POST",url: that.options.saveServerUrl, data: formData,dataType: "json", //声明成功使用json数据类型回调//如果传递的是FormData数据类型，那么下来的三个参数是必须的，否则会报错cache: false,  //默认是true，但是一般不做缓存processData: false, //用于对data参数进行序列化处理，这里必须false；如果是true，就会将FormData转换为String类型contentType: false,  //一些文件上传http协议的关系，自行百度，如果上传的有文件，那么只能设置为falsesuccess: function (ret) {  //请求成功后的回调函数if (ret.code == 200) {msg = '<span class="icon-check"> 上传成功！</div>';if (that.options.isLayer) {layer.msg(msg, {area:['','46px'], title: false });} else {alert(msg);}var imgUrl = ret.msg;//将上传成功后返回得到的链接添加到当前urls的后面newUrls = (curUrls == "") ? imgUrl : (newUrls + "," + imgUrl);that.$ele.children('input.zx-urlInput').val(newUrls);  //更新文本框的值//生成缩略图var imageView = new Image();imageView.src = imgUrl;imageView.onload = function () {var viewSize = that.resizeImgSize(originWidth, originHeight, that.options.viewWidth, that.options.viewHeight);var viewImg64 = that.getImgUrlBase64(imageView, viewSize);var viewItemHtml = '<div class="view-item"><img src="' + viewImg64 + '" /><div class="admin-box"><a href="javascript:void(0);"  class="edit-btn" data-inputName="pic_1">编辑</a> | <a href= "javascript:void(0);"  class="del-btn" >删除</a></div></div>';that.$ele.children('.zx-view-box').append(viewItemHtml);if (that.getInputUrls().counts >= that.options.maxCount) {that.hideUploadBtn();}else {return false;}};                                                }else {msg = '上传失败！';if (that.options.isLayer) {layer.alert(msg, { icon: 2 });} else {alert(msg);}}}});}}}else {return false;}}}});},bindEditEven: function () {var that = this;that.$ele.children('.zx-view-box').on('click', '.edit-btn', function () {var msg = '编辑功能开发中。。。！';if (that.options.isLayer) {layer.alert(msg, { icon: 2 });} else {alert(msg);}});},bindDelEven: function () {var that = this;var newUrls = '';that.$ele.children('.zx-view-box').on('click', '.del-btn', function () {//删除当前预览项var index = $(this).parents('.view-item').index();  //当前item的序号；用于删除input当中的值var curUrls = that.getInputUrls().urls;var curCount = that.getInputUrls().counts;if (curCount > 0) {var urls_arr = curUrls.split(',');var temp_arr = [];urls_arr.forEach(function (e, i) {if (i != index - 1) { temp_arr.push(e); }else { }});newUrls = temp_arr.join(','); $(this).parents('.view-item').remove();} else {newUrls = '';}that.showUploadBtn();that.$ele.children('input.zx-urlInput').val(newUrls);});}};$.fn.ZX_upload = function (options) {options = $.extend(defaults, options || {});    //合并对象return new Upload($(this), options);}
})(jQuery, window, document);

先贴上代码！
插件使用方法：

本插件需要依赖jquery库，我用的是jquery-1.12.4.js，另外layer插件可以按您的需要引用，也可以不引用，但是如果options的参数中的isLayer如果设置为true时，则必须引入layer库

先引用jquery.js库，我用的是jquery-1.12.4.js,
再引入layer.js库
再引入pintuer UI,不引用则需要按实际需要调整样式；

项目中调用插件方法：

    <script type="text/javascript" src="../js/jquery.zx-upload.js"></script><script type="text/javascript">$(function () {var upload1 = $('.upload-box-1').ZX_upload({maxCount: 1});var upload2 = $('.upload-box-2').ZX_upload({maxCount: 5});});</script>

缺点：图片不能多张图片上传，每次只能上传一张图片。

**特别注意**
1. 上传图片的接口，是以二进制流的格式传递的，所以在获取数据时要注意。（ASP后台建议使用各类无组件文件上传类,如：AnUpLoad上传类等，有需要的可以给我留言） 2. 文件上传接口需要提供的数据格式为json格式，上传成功需要得到{code:200,msg:""}，msg中为上传后的图片链接，如果上传失败，则需要将code给成其他值既可以。

Mark: 2018/7/21 18:05 因时间关系编辑功能还在开发中。

一个图片上传插件，含图片上传后生成预览图片相关推荐

input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
Java图片流导出图片为黑屏,Matisse预览图片黑屏，Glide内存溢出
项目中要到图片.视频选择的功能,然后google了一下,找到Matisse,知乎的图片选择框架,用的人还挺多的,果断依赖gradle,然后开始我的踩坑之旅. 首先,框架本身的图片框架glide是v3版 ...
win10不能预览图片
win10在系统清理后不能预览图片了, 有两种方法,我试的第2个方法可以解决: 一:更改全局视觉设置: 1.首先右键此电脑-属性或者从控制面板-系统和安全打开系统.显示如下图 3.这时进入" ...
elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片
需求:点击查看按钮,将图片显示出来. 问题:查看按钮必须触发两次才会将图片显示出来前端效果: 点击查看按钮,弹出来图片图片展示: 解决方法有两种: 第一种调用Image 的源码中的image-v ...
Vue vant 使用 ImagePreview 预览图片
Vue vant 使用 ImagePreview 预览图片场景1 编列数组生成图片,点击预览图片 <div class="zoom"v-for="(item, i ...
在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
[ASP.NET2.0] asp.net在ie7中使用FileUpload上传前预览图片 [ZT]
asp.net在ie7中使用FileUpload上传前预览图片因为安全性问题,IE7禁用了image控件引用本地图片,为了这个问题郁闷了好几天,终于找到了解决方案,好东西要与大家分享,代码如下: 此 ...
ajax js图片上传到php,Ajax上传并预览图片（附代码）
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上 ...
JQ input 文件上传并预览选择图片后,在页面上预览图片,页面渲染
有时候,我们更新界面信息时会遇到,选择图片后,并不能预览图片,必须提交数据库后才能在页面上显示出来,这样我们该怎样办呢? 起始jq为我们提供了两个方法change()和URL.createObject ...

一个图片上传插件，含图片上传后生成预览图片

一个图片上传插件，含图片上传后生成预览图片相关推荐

最新文章

热门文章