@ -1,8 +1,10 @@
< extend name = "Public/base" / >
< block name = "body" >
< script type = "text/javascript" src = "__STATIC__/uploadify/jquery.uploadify.min.js" > < / script >
< script type = "text/javascript" src = "__STATIC__/webuploader/webuploader.js" > < / script >
< link rel = "stylesheet" type = "text/css" href = "__CSS__/admin_table.css" media = "all" >
< link rel = "stylesheet" type = "text/css" href = "__STATIC__/webuploader/webuploader.css" media = "all" >
< div class = "cf main-place top_nav_list navtab_list" >
< h3 class = "page_title" > {$meta_title}< / h3 >
< p class = "description_text" > < / p >
@ -93,16 +95,33 @@
< td class = "l noticeinfo" > 菜单图标< / td >
< td class = "r table_radio" >
< span class = "form_icon table_btn table_upload" >
< input type = "file" id = "upload_picture_icon" >
< input type = "hidden" name = "icon" id = "cover_id_icon" value = "{$data.icon}" / >
< div class = "upload-img-box" >
< notempty name = "data['icon']" >
< div class = "upload-pre-item" >
< span class = "placeholder-graphic placeholder-graphic_icon" > < img src = "{$data['icon']}" / > < / span >
< / div >
< / notempty >
< / div >
< / span >
<!-- <input type="hidden" name="icon" id="cover_id_icon" value=""/>
< div id = "uploader-demo" >
< div id = "icon" >
< div class = "webuploader-pick" style = "line-height: 13px" > 上传图片< / div > < / div >
< div id = "iconList" class = "uploader-list" style = "display: flex;" > < / div >
< / div > -->
<!-- <div class="upload - img - box">
< notempty name = "data['icon']" >
< div class = "upload-pre-item" >
< span class = "placeholder-graphic placeholder-graphic_icon" > < img src = "{$data['icon']}" / > < / span >
< / div >
< / notempty >
< / div > -->
< input type = "hidden" name = "id" value = "{$data['id']}" / >
< input type = "hidden" name = "icon" value = "{$data['icon']}" / >
< div id = "uploadImg" class = "wu-example" >
< div class = "btns" >
< div id = "icon" >
< div class = "webuploader-pick" style = "line-height: 14px" > 上传图片< / div >
< / div >
< / div >
<!-- 用来存放文件信息 -->
< div id = "icon_thelist" class = "uploader-list" style = "display: flex;" >
< / div >
< / div >
< / span >
< span class = "notice-text" style = "left:215px;" > 菜单图标< / span >
< / td >
< / tr >
@ -117,37 +136,37 @@
/* 初始化上传插件 */
//上传游戏图标
/* 初始化上传插件 */
$("#upload_picture_icon").uploadify({
"height" : 30,
"swf" : "__STATIC__/uploadify/uploadify.swf",
"fileObjName" : "download",
"buttonText" : "上传图标",
"uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
"width" : 120,
'removeTimeout' : 1,
'fileTypeExts' : '*.jpg; *.jpeg; *.png; *.gif;',
"onUploadSuccess" : upload_picture_icon{$field.name},
'onFallback' : function() {
alert('未检测到兼容版本的Flash.');
}
});
function upload_picture_icon{$field.name}(file, data){
var data = $.parseJSON(data);
var src = '';
if(data.status){
src = data.path || data.url;
$("#cover_id_icon").val(src);
$("#cover_id_icon").parent().find('.upload-img-box').html(
'< div class = "upload-pre-item" > < span class = "placeholder-graphic placeholder-graphic_icon" > < img src = "' + src + '" / > < / span > < / div > '
);
} else {
updateAlert(data.info);
setTimeout(function(){
$('#top-alert').find('button').click();
$(that).removeClass('disabled').prop('disabled',false);
},1500);
}
}
// $("#upload_picture_icon").uploadify({
// "height" : 30,
// "swf" : "__STATIC__/uploadify/uploadify.swf",
// "fileObjName" : "download",
// "buttonText" : "上传图标",
// "uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
// "width" : 120,
// 'removeTimeout' : 1,
// 'fileTypeExts' : '*.jpg; *.jpeg; *.png; *.gif;',
// "onUploadSuccess" : upload_picture_icon{$field.name},
// 'onFallback' : function() {
// alert('未检测到兼容版本的Flash.');
// }
// });
// function upload_picture_icon{$field.name}(file, data){
// var data = $.parseJSON(data);
// var src = '';
// if(data.status){
// src = data.path || data.url;
// $("#cover_id_icon").val(src);
// $("#cover_id_icon").parent().find('.upload-img-box').html(
// '< div class = "upload-pre-item" > < span class = "placeholder-graphic placeholder-graphic_icon" > < img src = "' + src + '" / > < / span > < / div > '
// );
// } else {
// updateAlert(data.info);
// setTimeout(function(){
// $('#top-alert').find('button').click();
// $(that).removeClass('disabled').prop('disabled',false);
// },1500);
// }
// }
< / script >
< / form >
< div class = "form-item cf" >
@ -167,4 +186,259 @@ function upload_picture_icon{$field.name}(file, data){
//导航高亮
highlight_subnav('{:U('SdkMenu/lists')}');
< / script >
< script >
var userInfo = {userId:"kazaff", md5:""}; //用户会话信息
var chunkSize = 5000 * 1024; //分块大小
var uniqueFileName = null; //文件唯一标识符
var md5Mark = null;
var backEndUrl = "{:U('File/shard_upload',array('type'=>1,'session_id'=>session_id()))}";
WebUploader.Uploader.register({
"before-send-file" : "beforeSendFile",
"before-send" : "beforeSend",
"after-send-file" : "afterSendFile"
}, {
beforeSendFile: function(file){
//秒传验证
if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') {
var task = new $.Deferred();
var start = new Date().getTime();
(new WebUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){
//console.log(percentage);
}).then(function(val){
//console.log("总耗时: "+((new Date().getTime()) - start)/1000);
md5Mark = val;
userInfo.md5 = val;
$.ajax({
type: "POST"
, url: backEndUrl
, data: {status: "md5Check", md5: val}
, cache: false
, timeout: 1000 //todo 超时的话，只能认为该文件不曾上传过
, dataType: "json"
}).then(function(data, textStatus, jqXHR){
alert(data.chunk);
//console.log(data);
if(data.ifExist){ //若存在， ，
task.reject();
uploader.skipFile(file);
file.path = data.path;
}else{
task.resolve();
//拿到上传文件的唯一名称，用于断点续传
uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
}
}, function(jqXHR, textStatus, errorThrown){ //任何形式的验证失败，都触发重新上传
task.resolve();
//拿到上传文件的唯一名称，用于断点续传
uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
});
});
return $.when(task);
}
}
, beforeSend: function(block){
//分片验证是否已传过，用于断点续传
if (block['file']['source']['ext'] === 'zip' || block['file']['source']['ext'] === 'rar') {
var task = new $.Deferred();
$.ajax({
type: "POST"
, url: backEndUrl
, data: {
status: "chunkCheck"
, name: uniqueFileName
, chunkIndex: block.chunk
, size: block.end - block.start
}
, cache: false
, timeout: 1000 //todo 超时的话，只能认为该分片未上传过
, dataType: "json"
}).then(function(data, textStatus, jqXHR){
if(data.ifExist){ //若存在， ，
task.reject();
}else{
task.resolve();
}
}, function(jqXHR, textStatus, errorThrown){ //任何形式的验证失败，都触发重新上传
task.resolve();
});
return $.when(task);
}
}
, afterSendFile: function(file){
if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') {
var chunksTotal = 0;
if((chunksTotal = Math.ceil(file.size/chunkSize)) > 1){
//合并请求
var task = new $.Deferred();
$.ajax({
type: "POST"
, url: backEndUrl
, data: {
status: "chunksMerge"
, name: uniqueFileName
, chunks: chunksTotal
, ext: file.ext
, md5: md5Mark
}
, cache: false
, dataType: "json"
}).then(function(data, textStatus, jqXHR){
//todo 检查响应是否正常
task.resolve();
file.path = data.path;
$("#file_name").val(data.name);
$("#file_url").val(data.path+'/'+data.name);
$("#file_size").val(file.size);
}, function(jqXHR, textStatus, errorThrown){
task.reject();
});
return $.when(task);
}else{
//UploadComlate(file);
}
}
}
});
var uploaderImgIcon = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: '__STATIC__/webuploader/Uploader.swf',
// 文件接收服务端。
server: "{:U('File/uploadPicture',array('session_id'=>session_id(),'flag'=>true))}",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建， ，
pick: {
id:'#icon',
multiple:true
},
// dnd: false,
paste: document.body,
accept: {
title: '图片',
extensions: 'png,gif,jpg,jpeg,bmp',
mimeTypes: '.png,.gif,.jpg,.jpeg,.bmp',
},
// 不压缩image, 默认如果是jpeg， ！
resize: false,
disableGlobalDnd: true,
fileNumLimit:1,
threads:5,
thumb:true,
compress:false,
prepareNextFile: true,
formData: function(){return $.extend(true, {}, userInfo);},
chunked:false,
duplicate: true
});
var imgListIconData = [];
<?php if (!empty($img)) :?>
var html = '';
$('#icon_thelist').css('margin-top','10px');
<?php foreach ($img as $value3) { ?>
<?php $value3 = (int)$value3; ?>
imgListIconData.push(<?=$value3?> );
html += '< div id = "' + <?=$value3?> + '" class = "item flooring_page_img_box" style = "margin-right: 10px;" > ';
html += '< a href = "javascript:;" > < img src = "<?=get_cover($value3," path " ) ? > " style="width: 100px;height: 100px;cursor: move;">< / a > ';
html += '< h4 class = "info" style = "text-align: center;" > ';
html += '< a href = "javascript:;" class = "jsdelzip table_click" style = "float:none;display:inline-block;" img-id = "' + <?=$value3?> + '" > 删除< / a > ';
html += '< / h4 > ';
html += '< div class = "progress progress-striped active" style = "display: none;" > ';
html += '< div class = "progress-bar" role = "progressbar" style = "width: 100%;" > 100%< / div > ';
html += '< / div > ';
html += '< / div > ';
<?php }?>
$('#icon_thelist').html(html);
$('#icon_thelist').children().children('h4').children('.jsdelzip').on('click', function() {
var thisId = $(this).attr('img-id');
$(this).parent().parent().remove();
$.each(imgListIconData,function(index, item) {
if (thisId == item) {
imgListIconData.splice(index,1);
return false;
}
});
setIconVal();
});
<?php endif ;?>
var thisIndex2 = 0;
var imgIconList = $("#icon_thelist");
uploaderImgIcon.on( 'fileQueued', function( file ) {
var html = '';
html += '< div id = "' + file.id + '" class = "item" style = "margin-right: 10px;" > ';
html += '< a href = "javascript:;" > < img src = "" style = "width: 100px;height: 100px;cursor: move;" > < / a > ';
html += '< h4 class = "info" > ' + file.name + '< / h4 > ';
html += '< p class = "state" > 等待上传...< / p > ';
html += '< / div > ';
imgIconList.append(html);
imgIconList.css('margin-top','10px');
var img2 = imgIconList.children('#'+file.id).find('img');
uploaderImgIcon.makeThumb(file, function (error, src) {
if (error) {
return;
}
img2.attr('src', src);
}, 300, 300);
});
// 文件上传过程中创建进度条实时显示。
uploaderImgIcon.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('< div class = "progress progress-striped active" > ' +
'< div class = "progress-bar" role = "progressbar" style = "width: 0%" > ' +
'< / div > ' +
'< / div > ').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
$percent.text( (percentage * 100).toFixed(0) + '%' );
});
uploaderImgIcon.on( 'uploadSuccess', function( file , response) {
imgListIconData.push(Number(response.id));
console.log(response)
setIconVal();
$( '#'+file.id ).find('p.state').text('已上传').fadeOut(800);
//alert(JSON.stringify(response));
$('#'+file.id).find('h4.info').append('< a href = "javascript:;" class = "jsdelzip table_click" style = "float:none;display:inline-block;margin-left:10px;" > 删除< / a > ');
$('#'+file.id).find('.jsdelzip').on('click',function() {
uploaderImgIcon.removeFile( file.id );
$('#'+file.id).remove();
$.each(imgListIconData,function(index, item) {
if (response.id == item) {
imgListIconData.splice(index,1);
return false;
}
});
setIconVal();
return false;
});
});
function setIconVal()
{
var icon = '';
$.each(imgListIconData,function(index, item) {
icon += item + ',';
});
icon = icon.substring(0, icon.length - 1);
$('input[name=icon]').val(icon);
console.log(icon)
}
< / script >
< / block >
sunke
5 years ago