多图上传压缩base64存入数据库-php手册-php.cn

Maison

php教程

php手册

多图上传压缩base64存入数据库

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 11:35 AM

不BB直接上代码
html部分<div> <div> <form> <input> <div> </div> <input> </form> </div> </div> <script></script> <script></script> <script></script> <script></script>user.js部分$(function(){ $('#up').change(function(){ var obj=document.getElementById('up'); lrz(obj.files[0], { width: 640, height: 640, // 压缩开始 before: function () { console.log('压缩开始'); }, // 压缩失败 fail: function (err) { console.error(err); }, // 压缩结束（不论成功失败） always: function () { console.log('压缩结束'); }, // 压缩成功 done: function (results) { var id=Date.parse(new Date()); var html= $('#code').html(); console.log('压缩成功'); $('#code').html(html+'<div> x<img src="/static/imghwm/default1.png" data-src="" class="lazy" alt="多图上传压缩base64存入数据库" ><input> </div>'); $('#'+id).attr('src', results.base64); $('#v'+id).val(results.base64); } }) }); }) function rem(id){ $('#'+id).parent().remove(); }uploadPreview1.1.js部分，当然这是一个插件，网上有下载的/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE 谷歌火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img alt="多图上传压缩base64存入数据库" > </div> <input> 把需要进行预览的IMG标签外套一个DIV 然后给上传控件ID给予uploadPreview事件 $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}); */ jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(this); opts = jQuery.extend({ Img: "ImgPr", Width: 100, Height: 100, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () {} }, opts || {}); _self.getObjectURL = function (file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file) } else if (window.URL != undefined) { url = window.URL.createObjectURL(file) } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file) } return url }; _this.change(function () { if (this.value) { if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种"); this.value = ""; return false } if ($.browser.msie) { try { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) } catch (e) { var src = ""; var obj = $("#" + opts.Img); var div = obj.parent("div")[0]; _self.select(); if (top != self) { window.parent.document.body.focus() } else { _self.blur() } src = document.selection.createRange().text; document.selection.empty(); obj.hide(); obj.parent("div").css({ 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)', 'width': opts.Width + 'px', 'height': opts.Height + 'px' }); div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src } } else { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) } opts.Callback() } }) } });lrz.mobile.min.js需要网上下载
演示地址：http://1.jspgame.applinzi.com/Home/Game/user

AD：真正免费，域名+虚机+企业邮箱=0元

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn