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 ...

随机推荐

lftp命令详解
lftp.sh自动上传脚本: #!/bin/bash echo -e "\nScript start at \033[43;35m `date "+%H:%M:%S"` ...
r.js打包
久闻r.js的大名,但实际没有用它做过任何东西.今天用它时,发现网上许多教程都不对.研究一下,把我的实际经验分享给大家. 例子1 先是HTML页面 <!DOCTYPE html> < ...
Ansible 书写我的playbook
mysql 创建数据库 - hosts: localhost remote_user: root tasks: - name: test mysql mysql_db: name: ...
cf-Round542-Div2-B（贪心）
题目链接:http://codeforces.com/contest/1130/problem/B 思路: 贪心题.定义结构体数组a,a[i].x[0],a[i].x[1]分别表示i出现的第一个下标和 ...
蚁群算法（Java）tsp问题
1.理论概述 1.1.TSP问题旅行商问题,即TSP问题(旅行推销员问题.货郎担问题),是数学领域中著名问题之一.假设有一个旅行商人要拜访n个城市,他必须选择所要走的路径,路径的限制是每个城市只 ...
矩形最小路径和 · Minimum Path Sum
［抄题］: 给定一个只含非负整数的m*n网格,找到一条从左上角到右下角的可以使数字和最小的路径. ［思维问题］: ［一句话思路］: 和数字三角形基本相同［输入量］:空: 正常情况:特大:特小:程序里 ...
apache配置防盗链
1.确保apache已开启rewrite. 2.在.htaccess文件中添加如下: RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://X ...
Macbook pro睡眠状态恢复后没声音的解决办法
杀招: sudo killall coreaudiod macos会自动重启进程,恢复声音
LFS(Linux From Scratch)学习
一.简介 LFS──Linux from Scratch,就是一种从网上直接下载源码,从头编译LINUX的安装方式.它不是发行版,只是一个菜谱,告诉你到哪里去买菜(下载源码),怎么把这些生东西( ra ...
Judy Array API介绍
本文介绍https://code.google.com/p/judyarray/这个JudyArray实现的API. judy_open:新建一个JudyArray,并返回指向这个JudyArray的 ...

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

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

随机推荐

热门专题