thinkphp5集成H-ui后台（五）集成webUploader

在所有的编程语言中，都有对文件上传处理的知识点，这里不多赘述。在H-ui中，有一个功能强大的文件上传组件webUploader，今天就来说明和集成一下它。

先看一下webUploader集成后的效果：

1、页面中使用webUploader

这里就以博客的增加页面（blogAdd.html）为例，首先在页面中引入webUploader所需要的css样式和js文件：

然后是复制webUploader示例中的html代码：

<p>缩略图，只能选择一张</p>

</div>

</div>

webUploader初始化和配置代码（有点长）：

/*WebUploader 图片上传初始化配置*/

(function( $ ){

// 当domReady的时候开始初始化

$(function() {

var $wrap = $('.uploader-list-container'),

// 图片容器

$queue = $( '<ul class="filelist"></ul>' )

.appendTo( $wrap.find( '.queueList' ) ),

// 状态栏，包括进度和控制按钮

$statusBar = $wrap.find( '.statusBar' ),

// 文件总体选择信息。

$info = $statusBar.find( '.info' ),

// 上传按钮

$upload = $wrap.find( '.uploadBtn' ),

// 没选择文件之前的内容。

$placeHolder = $wrap.find( '.placeholder' ),

$progress = $statusBar.find( '.progress' ).hide(),

// 添加的文件数量

fileCount = 0,

// 添加的文件总大小

fileSize = 0,

// 优化retina, 在retina下这个值是2

ratio = window.devicePixelRatio || 1,

// 缩略图大小

thumbnailWidth = 110 * ratio,

thumbnailHeight = 110 * ratio,

// 可能有pedding, ready, uploading, confirm, done.

state = 'pedding',

// 所有文件的进度信息，key为file id

percentages = {},

// 判断浏览器是否支持图片的base64

isSupportBase64 = ( function() {

var data = new Image();

var support = true;

data.onload = data.onerror = function() {

if( this.width != 1 || this.height != 1 ) {

support = false;

}

data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

return support;

} )(),

// 检测是否已经安装flash，检测flash的版本

flashVersion = ( function() {

var version;

try {

version = navigator.plugins[ 'Shockwave Flash' ];

version = version.description;

} catch ( ex ) {

try {

version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')

.GetVariable('$version');

} catch ( ex2 ) {

version = '0.0';

}

version = version.match( /\d+/g );

return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );

} )(),

supportTransition = (function(){

var s = document.createElement('p').style,

r = 'transition' in s ||

'WebkitTransition' in s ||

'MozTransition' in s ||

'msTransition' in s ||

'OTransition' in s;

s = null;

return r;

})(),

// WebUploader实例

uploader;

if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {

// flash 安装了但是版本过低。

if (flashVersion) {

(function(container) {

window['expressinstallcallback'] = function( state ) {

switch(state) {

case 'Download.Cancelled':

alert('您取消了更新！')

break;

case 'Download.Failed':

alert('安装失败')

break;

default:

alert('安装已成功，请刷新！');

break;

}

delete window['expressinstallcallback'];

};

var swf = 'expressInstall.swf';

// insert flash object

var html = '<object type="application/' +

'x-shockwave-flash" data="' + swf + '" ';

if (WebUploader.browser.ie) {

html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';

}

html += 'width="100%" height="100%" style="outline:0">' +

'<param name="movie" value="' + swf + '" />' +

'<param name="wmode" value="transparent" />' +

'<param name="allowscriptaccess" value="always" />' +

'</object>';

container.html(html);

})($wrap);

// 压根就没有安转。

} else {

$wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');

}

return;

} else if (!WebUploader.Uploader.support()) {

alert( 'Web Uploader 不支持您的浏览器！');

return;

}

// 实例化

uploader = WebUploader.create({

pick: {

id: '#filePicker-2',

label: '点击选择图片'

formData: {

uid: 123

dnd: '#dndArea',

paste: '#uploader',

swf: '__ADMIN__/lib/webuploader/0.1.5/Uploader.swf',

chunked: false,

chunkSize: 512 * 1024,

server: '__URL__/webuploader/fileUpload',

// runtimeOrder: 'flash',

// accept: {

// title: 'Images',

// extensions: 'gif,jpg,jpeg,bmp,png',

// mimeTypes: 'image/*'

// },

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

resize: false,

// 只允许选择图片文件。

accept: {

title: 'Images',

extensions: 'gif,jpg,jpeg,bmp,png',

mimeTypes: 'image/*'

// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。

disableGlobalDnd: true,

fileNumLimit: 5,

fileSizeLimit: 200 * 1024 * 1024, // 200 M

fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M

});

// 拖拽时不接受 js, txt 文件。

uploader.on( 'dndAccept', function( items ) {

var denied = false,

len = items.length,

i = 0,

// 修改js类型

unAllowed = 'text/plain;application/javascript ';

for ( ; i < len; i++ ) {

// 如果在列表里面

if ( ~unAllowed.indexOf( items[ i ].type ) ) {

denied = true;

break;

}

return !denied;

});

uploader.on('dialogOpen', function() {

console.log('here');

});

// uploader.on('filesQueued', function() {

// uploader.sort(function( a, b ) {

// if ( a.name < b.name )

// return -1;

// if ( a.name > b.name )

// return 1;

// return 0;

// });

// 添加“添加文件”的按钮，

uploader.addButton({

id: '#filePicker2',

label: '继续添加'

});

uploader.addButton({

id: '#filePicker',

label: '选择文件',

multiple : true

});

uploader.on('ready', function() {

window.uploader = uploader;

});

// 当有文件添加进来时执行，负责view的创建

function addFile( file ) {

var $li = $( '<li id="' + file.id + '">' +

'<p class="title">' + file.name + '</p>' +

'<p class="imgWrap"></p>'+

'<p class="progress"><span></span></p>' +

'</li>' ),

$btns = $('<div class="file-panel">' +

'<span class="cancel">删除</span>' +

'<span class="rotateRight">向右旋转</span>' +

'<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),

$prgress = $li.find('p.progress span'),

$wrap = $li.find( 'p.imgWrap' ),

$info = $('<p class="error"></p>'),

showError = function( code ) {

switch( code ) {

case 'exceed_size':

text = '文件大小超出';

break;

case 'interrupt':

text = '上传暂停';

break;

default:

text = '上传失败，请重试';

break;

}

$info.text( text ).appendTo( $li );

};

if ( file.getStatus() === 'invalid' ) {

showError( file.statusText );

} else {

// @todo lazyload

$wrap.text( '预览中' );

uploader.makeThumb( file, function( error, src ) {

var img;

if ( error ) {

$wrap.text( '不能预览' );

return;

}

if( isSupportBase64 ) {

img = $('<img src="'+src+'">');

$wrap.empty().append( img );

} else {

$.ajax('lib/webuploader/0.1.5/server/preview.php', {

method: 'POST',

data: src,

dataType:'json'

}).done(function( response ) {

if (response.result) {

img = $('<img src="'+response.result+'">');

$wrap.empty().append( img );

} else {

$wrap.text("预览出错");

}

});

}

}, thumbnailWidth, thumbnailHeight );

percentages[ file.id ] = [ file.size, 0 ];

file.rotation = 0;

}

file.on('statuschange', function( cur, prev ) {

if ( prev === 'progress' ) {

$prgress.hide().width(0);

} else if ( prev === 'queued' ) {

$li.off( 'mouseenter mouseleave' );

$btns.remove();

}

// 成功

if ( cur === 'error' || cur === 'invalid' ) {

console.log( file.statusText );

showError( file.statusText );

percentages[ file.id ][ 1 ] = 1;

} else if ( cur === 'interrupt' ) {

showError( 'interrupt' );

} else if ( cur === 'queued' ) {

percentages[ file.id ][ 1 ] = 0;

} else if ( cur === 'progress' ) {

$info.remove();

$prgress.css('display', 'block');

} else if ( cur === 'complete' ) {

$li.append( '<span class="success"></span>' );

}

$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );

});

$li.on( 'mouseenter', function() {

$btns.stop().animate({height: 30});

});

$li.on( 'mouseleave', function() {

$btns.stop().animate({height: 0});

});

$btns.on( 'click', 'span', function() {

var index = $(this).index(),

deg;

switch ( index ) {

case 0:

uploader.removeFile( file );

return;

case 1:

file.rotation += 90;

break;

case 2:

file.rotation -= 90;

break;

}

if ( supportTransition ) {

deg = 'rotate(' + file.rotation + 'deg)';

$wrap.css({

'-webkit-transform': deg,

'-mos-transform': deg,

'-o-transform': deg,

'transform': deg

});

} else {

$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');

// use jquery animate to rotation

// $({

// rotation: rotation

// }).animate({

// rotation: file.rotation

// }, {

// easing: 'linear',

// step: function( now ) {

// now = now * Math.PI / 180;

// var cos = Math.cos( now ),

// sin = Math.sin( now );

// $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");

// }

// });

}

});

$li.appendTo( $queue );

}

// 负责view的销毁

function removeFile( file ) {

var $li = $('#'+file.id);

delete percentages[ file.id ];

updateTotalProgress();

$li.off().find('.file-panel').off().end().remove();

}

function updateTotalProgress() {

var loaded = 0,

total = 0,

spans = $progress.children(),

percent;

$.each( percentages, function( k, v ) {

total += v[ 0 ];

loaded += v[ 0 ] * v[ 1 ];

} );

percent = total ? loaded / total : 0;

spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );

spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );

updateStatus();

}

function updateStatus() {

var text = '', stats;

if ( state === 'ready' ) {

text = '选中' + fileCount + '张图片，共' +

WebUploader.formatSize( fileSize ) + '。';

} else if ( state === 'confirm' ) {

stats = uploader.getStats();

if ( stats.uploadFailNum ) {

text = '已成功上传' + stats.successNum+ '张照片至XX相册，'+

stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'

}

} else {

stats = uploader.getStats();

text = '共' + fileCount + '张（' +

WebUploader.formatSize( fileSize ) +

'），已上传' + stats.successNum + '张';

if ( stats.uploadFailNum ) {

text += '，失败' + stats.uploadFailNum + '张';

}

$info.html( text );

}

function setState( val ) {

var file, stats;

if ( val === state ) {

return;

}

$upload.removeClass( 'state-' + state );

$upload.addClass( 'state-' + val );

state = val;

switch ( state ) {

case 'pedding':

$placeHolder.removeClass( 'element-invisible' );

$queue.hide();

$statusBar.addClass( 'element-invisible' );

uploader.refresh();

break;

case 'ready':

$placeHolder.addClass( 'element-invisible' );

$( '#filePicker2' ).removeClass( 'element-invisible');

$queue.show();

$statusBar.removeClass('element-invisible');

uploader.refresh();

break;

case 'uploading':

$( '#filePicker2' ).addClass( 'element-invisible' );

$progress.show();

$upload.text( '暂停上传' );

break;

case 'paused':

$progress.show();

$upload.text( '继续上传' );

break;

case 'confirm':

$progress.hide();

$( '#filePicker2' ).removeClass( 'element-invisible' );

$upload.text( '开始上传' );

stats = uploader.getStats();

if ( stats.successNum && !stats.uploadFailNum ) {

setState( 'finish' );

return;

}

break;

case 'finish':

stats = uploader.getStats();

if ( stats.successNum ) {

alert( '上传成功' );

} else {

// 没有成功的图片，重设

state = 'done';

location.reload();

}

break;

}

updateStatus();

}

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

/* uploader.on( 'uploadSuccess', function( file,data ) {

alert(data.msg + "_" + data.success);

$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");

}); */

uploader.onUploadSuccess = function(file,data){

//上传成功后，设置图片访问路径

data = eval(data);

if(data.success){

var imgurl = data.msg;

$("#image_url").val(imgurl);

}

};

uploader.onUploadProgress = function( file, percentage ) {

var $li = $('#'+file.id),

$percent = $li.find('.progress span');

$percent.css( 'width', percentage * 100 + '%' );

percentages[ file.id ][ 1 ] = percentage;

updateTotalProgress();

};

uploader.onFileQueued = function( file ) {

fileCount++;

fileSize += file.size;

if ( fileCount === 1 ) {

$placeHolder.addClass( 'element-invisible' );

$statusBar.show();

}

addFile( file );

setState( 'ready' );

updateTotalProgress();

};

uploader.onFileDequeued = function( file ) {

fileCount--;

fileSize -= file.size;

if ( !fileCount ) {

setState( 'pedding' );

}

removeFile( file );

updateTotalProgress();

};

uploader.on( 'all', function( type ) {

var stats;

switch( type ) {

case 'uploadFinished':

setState( 'confirm' );

break;

case 'startUpload':

setState( 'uploading' );

break;

case 'stopUpload':

setState( 'paused' );

break;

}

});

uploader.onError = function( code ) {

if(code == 'Q_EXCEED_NUM_LIMIT'){

alert("缩略图只能上传一张图片");

return;

}

alert( 'Error: ' + code );

};

$upload.on('click', function() {

if ( $(this).hasClass( 'disabled' ) ) {

return false;

}

if ( state === 'ready' ) {

uploader.upload();

} else if ( state === 'paused' ) {

uploader.upload();

} else if ( state === 'uploading' ) {

uploader.stop();

}

});

$info.on( 'click', '.retry', function() {

uploader.retry();

} );

$info.on( 'click', '.ignore', function() {

alert( 'todo' );

} );

$upload.addClass( 'state-' + state );

updateTotalProgress();

});

})( jQuery );

</script>

我们这么一锅粥的将代码copy过来，看上去webupload好像很复杂，有点无从下手的感觉。然而很多的代码都只是webupload自己需要调用的一些自定义函数，我们只要拿来用就可以。接下来我们详细讨论下webUploader的配置

2、webUploader的一些配置

实例化webUploader中，配置webUploader与后台访问的路径、上传文件的数量等等，如图：

配置到了这里，其实webUploader的页面配置就已经差不多了。另外一些细节的配置，这里举一个例子，如果客户操作的时候，上传的数量超出了我们配置的数量，我们怎么友好提示呢？如图：

在webUploader中，有许多自定义的错误编码，如图：

我们只要按照这些编码在错误事件中注册就行：

在测试过程中，如果报出其余的错误编码，那么只要根据错误编码的意思映射对应的中文描述就行

3、后台处理webUploader的上传

我们在配置中访问后台的路径是server: '__URL__/webuploader/fileUpload',所以我们创建一个与之对应的类WebuploaderController.php，那么这个类的fileUpload函数其实就是将webuploader传到后台的文件有我们自己的逻辑保存到指定的目录，并返回网页访问的URL，这里直接上代码：

<?php

namespace app\admin\controller;

use think\Controller;

use think\Exception;

use think\Request;

/**

* @author tim

class WebuploaderController extends Controller

{

/**

* 1、获取图片并且保存到服务器指定的目录下

* 2、生成图片的URL访问路径，并返回

* */

public function fileUpload(Request $request){

try{

//获取图片对象

$filetemp = $request->file('file');

//存放服务器上地址

$serverFile = $filetemp->move(ROOT_PATH.'/public/upload/image/single');

//访问地址

$imageUrl = 'http://'.$_SERVER['HTTP_HOST'].str_replace(ROOT_PATH.'/public', '', $serverFile->getPathname());

$ajaxJson['success'] = true;

$ajaxJson['msg'] = $imageUrl;

}catch(Exception $e){

$ajaxJson['success'] = false;

}

return json_encode($ajaxJson);

}

当我们上传成功后，页面将返回访问当前图片的URL信息获取下来，

其中，image_url是我们自定义的表单隐藏域，用于存放于数据库中。

最后通过webuploader上传的文件放置在了'../public/image/single/日期文件夹'中。

4、其它说明

webUploader多张图片的上传其实和单图上传差不多，webUploader也是一张一张的轮流上传，只是我们在处理的时候要动态的获取每张图片的名称，好进一步处理对应的访问URL

thinkphp5集成H-ui后台（五）集成webUploader的更多相关文章

在Abp中集成Swagger UI功能
在Abp中集成Swagger UI功能 1.安装Swashbuckle.Core包通过NuGet将Swashbuckle.Core包安装到WebApi项目(或Web项目)中. 2.为WebApi方法 ...
2017.2.28 activiti实战--第七章--Spring容器集成应用实例（五）普通表单
学习资料:<Activiti实战> 第七章 Spring容器集成应用实例(五)普通表单第六章中介绍了动态表单.外置表单.这里讲解第三种表单:普通表单. 普通表单的特点: 把表单内容写在 ...
基于H.ui.Admin UI模板的网站管理后台
最近接手一个跨境电商平台开发,客户侧重电商网站UI设计,对管理后台要求不高,由我们决定选哪一款后台模板.找来找去,感觉还是H.ui靠谱一些,主要是这个模板清爽,不需要过多选择.其他的流行后台模板也看了 ...
15、Spring Boot 2.x 集成 Swagger UI
1.15.Spring Boot 2.x 集成 Swagger UI 完整源码: Spring-Boot-Demos 1.15.1 pom文件添加swagger包 <swagger2.versi ...
asp.net core 集成swagger ui
什么是Swagger? 说swagger 之前,我们先说一下OpenApi 规范. OpenApi 是一种和语言无关的用于描述RESTAPIs 接口功能的一种规范,对RESTAPIs 接口的描述包括: ...
3、集成springfox-swagger 3.0.0 + 集成knife4j
集成springfox-swagger 3.0.0 + 集成knife4j 1.基本用法 1.1.导入依赖  <dependency> <gr ...
SimpleInjector与MVC4集成，与Web Api集成，以及通过属性注入演示
SimpleInjector与MVC4集成,与Web Api集成,以及通过属性注入演示 1,与MVC集成见http://simpleinjector.codeplex.com/wikipage? ...
php集成环境和自己配置的区别，php集成环境、php绿色集成环境、php独立安装版环境这三者的区别
最近有学生问我,直接使用PHP集成环境和我们自己独立安装的php环境有什么不一样吗? 答:PHP集成环境,和自己安装的php环境实际上没啥区别的,只不过大部分的集成环境进行了一些绿化操作,本质上没啥区 ...
Vue3 + Element ui 后台管理系统
Vue3 + Element ui 后台管理系统概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...

随机推荐

Python Spider 抓取猫眼电影TOP100
""" 抓取猫眼电影TOP100 """ import re import time import requests from bs4 im ...
jemalloc for mysql
ptmalloc 是glibc的内存分配管理 tcmalloc 是google的内存分配管理模块 jemalloc 是BSD的提供的内存分配管理三者jemalloc和tcmalloc的性能不分伯仲, ...
vim nginx配置文件时具备语法高亮功能
1.下载nginx.vim 下载页面:http://www.vim.org/scripts/script.php?script_id=1886 wget http://www.vim.org/scri ...
迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项
本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速 ...
MySQL 语句的规范
经典动态规划python实现
1.最长上升子序列对于一个数字序列,请设计一个复杂度为O(nlogn)的算法,返回该序列的最长上升子序列的长度,这里的子序列定义为这样一个序列U1,U2...,其中Ui < Ui+1,且A[U ...
Eclipse中spring项目的XML文件的问题
XML文件提示Start state definition is missing. Add a 'start-state' element 原因:Eclipse 认为 XML 是“Spring Web ...
eclispe 通过git向码云上传
本文将介绍如何将本地的项目提交到开源中国上去,过程比较详细,实现起来很简单.由于自己也算是一个新手,所以没有做过多的解释,只是单纯的描述了该如何去做. 1.在开源中国上面新建一个空项目到这里也就结束 ...
web程序的配置文件的修改
vs上面的config与wwwroot中的config有可能不一样,注意修改配置的资源路径及ip及数据库及禁止ip
SpringMVC源码总结（一）HandlerMapping和HandlerAdapter入门
SpringMVC在使用过程中,大多是使用注解,对它的实现接口之类的关系理解变得模糊, 通过对XML配置的理解,可以理清各个类的关系,譬如控制器类要实现Controller接口. 接触SpringMV ...

thinkphp5集成H-ui后台（五）集成webUploader

thinkphp5集成H-ui后台（五）集成webUploader的更多相关文章

随机推荐

热门专题