1.引入html5uploder.css文件：
@charset "utf-8";
/* CSS Document */
.uploader-filename {
margin : 0 10px ;
}
.uploader-progress {
margin : 0 10px ;
}
.uploadfile {
width : 0 ;
}
.filelist li {
list-style-type : none ;
margin-top : 10px ;
}
.filelist {
padding : 0 ;
}
/* .uploadbtn,.delfilebtn,.uploadfilebtn{ */
/* display:inline-block; */
/* border:1px solid #999; */
/* line-height:24px; */
/* border-radius:2px; */
/* padding:0 18px; */
/* font-size:12px; */
/* color:#666; */
/* cursor:pointer; */
/* background:url(../imgs/html5uploader/btnbg.png) repeat-x 0 0; */
/* text-decoration:none; */
/* } */
.filename, .progressnum, .delfilebtn, .uploadbtn {
font-size : 12px ;
color : #666 ;
margin-left : 10px ;
}
.progress {
display : inline-block ;
width : 98% ;
height : 10px ;
background-color : white ;
border-radius : 20px ;
border : 2px groove #666 ;
vertical-align : middle ;
padding : 0 2px ;
}
.progressbar {
width : 0 ;
height : 9px ;
border-radius : 20px ;
background : url(../imgs/html5uploader/jdt.png) repeat-x center ;
}
2.引入jquery.js文件及
html5uploder.js文件代码如下：
/*
html5uploader V1.0
author:吕大豹
date:2013.2.21
*/
console.log( typeof (XMLHttpRequest));
console.log( typeof (window.ActiveXObject));
function CreateXMLHttp() {
try {
xmlHttp = new XMLHttpRequest();// 尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
} catch (e) {
try {
xmlHttp = ActiveXobject("Msxml12.XMLHTTP");// 使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
} catch (e) {
try {
xmlHttp = ActiveXobject("Microsoft.XMLHTTP");// 使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
} catch (failed) {
xmlHttp = false ;// 如果失败了还保持false
}
}
}
return xmlHttp;
}
// if (typeof(XMLHttpRequest) != "function" && typeof(window.ActiveXObject) != "undefined") {
// function XMLHttpRequest() {
// var xmlhttp_arr = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
// var xmlhttp;
// for (i = 0; i < xmlhttp_arr.length; i++) {
// if (xmlhttp = new ActiveXObject(xmlhttp_arr[i]))
// break;
// }
// return xmlhttp;
// }
// }
(function ($) {
$.fn.html5uploader = function (opts) {
var defaults = {
fileTypeExts: '*/*',// 允许上传的文件类型，填写mime类型
url: '',// 文件提交的地址
auto: false ,// 自动上传
multi: true ,// 默认允许选择多个文件
buttonText: '选择文件',// 上传按钮上的文字
removeTimeout: 1000,// 上传完成后进度条的消失时间
itemTemplate: '${fileName} (${fileSize}) ',
// 上传队列显示的模板,最外层标签使用
onUploadStart:
function () {
}, // 上传开始时的动作
onUploadSuccess:
function () {
}, // 上传成功的动作
onUploadComplete:
function () {
}, // 上传完成的动作
onUploadError:
function () {
}, // 上传失败的动作
onInit:
function () {
} // 初始化时的动作
}
var option =
$.extend(defaults, opts);
// 将文件的单位由bytes转换为KB或MB
var formatFileSize =
function (size) {
if (size > 1024 * 1024
) {
size = (Math.round(size * 100 / (1024 * 1024)) / 100).toString() + 'MB'
;
}
else {
size = (Math.round(size * 100 / 1024) / 100).toString() + 'KB'
;
}
return size;
}
// 根据文件序号获取文件
var getFile =
function (index, files) {
for (
var i = 0; i < files.length; i++
) {
if (files[i].index ==
index) {
return files[i];
}
}
return false ;
}
// 将文件类型格式化为数组
var formatFileType =
function (str) {
if (str) {
return str.split(","
);
}
return false ;
}
this .each(
function () {
var _this = $(
this );
// 先添加上file按钮和上传列表
var inputstr = '
;
if (option.multi) {
inputstr += 'multiple'
;
}
inputstr += '/>'
;
inputstr += '
';
inputstr += option.buttonText;
inputstr += ' '
;
var fileInputButton =
$(inputstr);
var uploadFileList = $('
'
);
_this.append(fileInputButton, uploadFileList);
// 创建文件对象
var ZXXFILE =
{
fileInput: fileInputButton.get( 0),
// html file控件
upButton:
null ,
// 提交按钮
url: option.url,
// ajax地址
fileFilter: [],
// 过滤后的文件数组
filter:
function (files) {
// 选择文件组的过滤方法
var arr =
[];
var typeArray =
formatFileType(option.fileTypeExts);
if (!
typeArray) {
for (
var i
in files) {
if (files[i].constructor ==
File) {
arr.push(files[i]);
}
}
}
else {
for (
var i
in files) {
if (files[i].constructor ==
File) {
// for (var j in files[i]) {
// console.log('file.' + j + ' = ' + files[i][j]);
// }
if (files[i].type == '' || $.inArray(files[i].type, typeArray) >= 0
) {
arr.push(files[i]);
}
else {
alert( '文件类型不允许！'
);
fileInputButton.val( ''
);
}
}
}
}
return arr;
},
// 文件选择后
onSelect: option.onSelect ||
function (files) {
for (
var i = 0; i < files.length; i++
) {
var file =
files[i];
var html =
option.itemTemplate;
console.log(file);
// 处理模板中使用的变量
html = html.replace(/\${fileID}/g, file.index).replace(/\${fileName}/g, file.name).replace(/\${fileSize}/
g, formatFileSize(file.size));
uploadFileList.append(html);
// 判断是否是自动上传
if (option.auto) {
ZXXFILE.funUploadFile(file);
}
}
// 如果配置非自动上传，绑定上传事件
if (!
option.auto) {
_this.find( '.uploadbtn').die().on('click',
function () {
var index = parseInt($(
this ).parents('li').attr('id'
));
ZXXFILE.funUploadFile(getFile(index, files));
});
}
// 为删除文件按钮绑定删除文件事件
_this.find('.delfilebtn').on('click',
function () {
var index = parseInt($(
this ).parents('li').attr('id'
));
ZXXFILE.funDeleteFile(index);
});
},
// 文件删除后
onDelete:
function (index) {
if (option.removeTimeout) {
setTimeout( function () {
$( '#' + index +
option.name).fadeOut().remove();
}, option.removeTimeout);
} else {
_this.find( '#' + index +
option.name).fadeOut().remove();
}
},
onProgress: function (file, loaded, total) {
// 文件上传进度
var eleProgress = _this.find('#' + file.index + option.name + ' .uploader-progress'
),
percent = (loaded / total * 100).toFixed(0) + '%'
;
if (total - loaded < 500000) {
// 解决四舍五入误差
loaded =
total;
}
eleProgress.html(percent);
},
onUploadSuccess: option.onUploadSuccess, // 文件上传成功时
onUploadError: option.onUploadError,
// 文件上传失败时,
onUploadComplete: option.onUploadComplete,
// 文件全部上传完毕时
/* 开发参数和内置方法分界线 */
// 获取选择文件，file控件或拖放
funGetFiles:
function (e) {
// 获取文件列表对象
var files = e.target.files ||
e.dataTransfer.files;
console.log(files);
// 继续添加文件
files =
this .filter(files)
this .fileFilter.push(files);
this .funDealFiles(files);
return this ;
},
// 选中文件的处理与回调
funDealFiles:
function (files) {
var fileCount = _this.find('.filelist li').length;
// 队列中已经有的文件个数
for (
var i = 0; i <
this .fileFilter.length; i++
) {
for (
var j = 0; j <
this .fileFilter[i].length; j++
) {
var file =
this .fileFilter[i][j];
// 增加唯一索引值
file.index = ++
fileCount;
}
}
// 执行选择回调
this .onSelect(files);
return this ;
},
// 删除对应的文件
funDeleteFile:
function (index) {
for (
var i = 0; i <
this .fileFilter.length; i++
) {
for (
var j = 0; j <
this .fileFilter[i].length; j++
) {
var file =
this .fileFilter[i][j];
if (file.index ==
index) {
this .fileFilter[i].splice(j, 1
);
this .onDelete(index);
}
}
}
return this ;
},
// 文件上传
funUploadFile:
function (file) {
var self =
this ;
( function (file) {
// var xhr = new XMLHttpRequest();
var xhr =
new CreateXMLHttp();
console.log( 'xhr Create'
);
if (xhr.upload) {
// 上传中
if (xhr.upload.addEventListener) {
xhr.upload.addEventListener( "progress",
function (e) {
console.log( 'uploaded = ' + e.loaded + ' / ' +
e.total);
self.onProgress(file, e.loaded, e.total);
}, false );
} else if (xhr.upload.atachEvent) {
xhr.upload.atachEvent( "progress",
function (e) {
console.log( 'uploaded = ' + e.loaded + ' / ' +
e.total);
self.onProgress(file, e.loaded, e.total);
});
}
// xhr.addEventListener("progress", function (e) {
// console.log('downloaded = ' + e.loaded + ' / ' + e.total);
// });
// 文件上传成功或是失败
console.log('XMLHttpRequest onreadystatechange'
);
xhr.onreadystatechange =
function (e) {
console.log( 'xhr.readyState = ' +
xhr.readyState);
if (xhr.readyState == 4
) {
if (xhr.status == 200
) {
self.onUploadSuccess(file, xhr.responseText);
self.onDelete(file.index);
self.onUploadComplete();
} else {
self.onDelete(file.index);
self.onUploadError(file, xhr.responseText);
}
}
};
console.log( 'onUploadStart'
);
option.onUploadStart();
// 开始上传
xhr.open("POST", self.url,
true );
console.log( 'xhr.open'
);
// xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
console.log( 'xhr.send'
);
}
})(file);
},
init: function () {
var self =
this ;
// 文件选择控件选择
if (
this .fileInput) {
// $(this.fileInput).on('change', function (e) {
// self.funGetFiles(e);
// });
if (
this .fileInput.addEventListener) {
this .fileInput.addEventListener("change",
function (e) {
self.funGetFiles(e);
}, false );
} else if (
this .fileInput.attachEvent) {
this .fileInput.attachEvent("change",
function (e) {
self.funGetFiles(e);
});
}
}
// 点击上传按钮时触发file的click事件
_this.find('.uploadfilebtn').on('click',
function () {
_this.find( '.uploadfile').trigger('click'
);
});
option.onInit();
}
};
// 初始化文件对象
ZXXFILE.init();
});
}
})(jQuery)
3.调用：
4.html代码：
< div class ="form-group" >
< label for ="form_img" > * 商品图label >
< div id ="modal_list_uploader" >div >
< input id ="form_img" type ="hidden" name ="img" value ="" />
< input id ="goodId" type ="hidden" name ="goodId" value ="id; ?>" />
< div id ="form_img_preview" > php if ($goodAR->img != '') { ?> < img
src ="img; ?>" /> php } ?> div >
div >
4.php服务器端：
1）
public function upListImgAction()
{
$imageStream = file_get_contents ('php://input');
$imageArr = System_Module_UploadImage::saveStream($imageStream , 'tmp');
System_Tool_Image ::thumb($imageArr ['path'], $imageArr ['path'], 112, 89);
echo $imageArr ['url'];
}
public static function saveStream($stream , $folder )
{
self ::$saveFolder = $folder ;
// 如果当前表单的文件字段中有值，而且是有效值
if (!empty ($stream )) {
$imageArr = self::createImageByStream($stream );
} else {
throw new SysException(System_Lib_ErrorMessage::SAVE_MEDIA_FILE_ERROR);
}
return $imageArr ;
}
public static function thumb($src , $tar , $width , $height , $opacity = 100)
{
list ($srcWidth , $srcHeight ) = getimagesize ($src );
if ($srcWidth == $width && $srcHeight == $height ) {
if ($src == $tar ) {
return true ;
} else {
return System_Lib_File::copy ($src , $tar );
}
}
$rate = $width / $height ;
System_Lib_Log ::trace(get_class () . '::thumb()', "$srcWidth , $srcHeight , $width , $height , $rate ");
if ($srcWidth / $srcHeight > $rate ) {
$srcX = floor (($srcWidth - $srcHeight * $rate ) / 2);
$srcY = 0;
$srcWidth = $srcHeight * $rate ;
} else {
$srcX = 0;
$srcY = floor (($srcHeight - $srcWidth / $rate ) / 2);
$srcHeight = $srcWidth / $rate ;
}
System_Lib_Log ::trace(get_class () . '::thumb()', "$srcWidth , $srcHeight , $width , $height , $srcX , $srcY ");
if (function_exists ("imagecreatetruecolor")) {
$new_img = self::createImage($src );
$thumb_img = imagecreatetruecolor($width , $height );
System_Lib_Log ::trace(get_class () . '::thumb()', "$srcX , $srcY , $width , $height , $srcWidth , $srcHeight ");
if (!imagecopyresampled($thumb_img , $new_img , 0, 0, $srcX , $srcY , $width , $height , $srcWidth , $srcHeight )) {
return false ;
} else {
imagejpeg( $thumb_img , $tar , $opacity );
imagedestroy( $thumb_img );
}
} else {
return false ;
}
return true ;
}
2）
public function ajaxAddAction()
{
$img = $this ->getParam('img', 'String');
System_Lib_App ::app()->pdo('db')->beginTransaction();
try {
$goodArr = array ( );
// 移动列表图片
list ($imgPath , $imgUrl ) = System_Module_ServeGoods::removeListFile($img );
$goodArr = array_merge ($goodArr , array (
'img' => $imgUrl
));
// 保存商品
$goodsAR = System_Module_ServeGoods::add($goodArr );
// 事务提交
System_Lib_App::app()->pdo('db')->commit();
} catch (Exception $e ) {
// 事务回滚
System_Lib_App::app()->pdo('db')->rollback();
throw new SysException($e ->getCode());
}
$this ->ajaxSuccess();
}
public static function removeListFile($tmpFile )
{
$root = System_Lib_App::app()->getConfig('mediaRoot');
$webRoot = System_Lib_App::app()->getConfig('mediaWebRoot');
$tmpFile = str_replace ($webRoot , $root , $tmpFile );
$res = System_Module_UploadImage::removeTmpFile($tmpFile , 'serve.image');
return $res ;
}
public static function removeTmpFile($tmpFile , $folderName )
{
$root = System_Lib_App::app()->getConfig('mediaRoot');
$webRoot = System_Lib_App::app()->getConfig('mediaWebRoot');
$fileName = System_Tool_Hex::hex10to64(time () . rand (1000, 9999));
$path = '/' . $folderName . date ('/Y-m/d/') . $fileName . '.jpg';
// 把源文件移动为目标文件（相当于剪切->黏贴 操作）
if (!System_Lib_File::copy ($tmpFile , $root . '/' . $path )) {
throw new SysException(System_Lib_ErrorMessage::SAVE_MEDIA_FILE_ERROR);
}
return array (
$root . $path ,
$webRoot . $path
);
}
public static function copy ($src , $tar )
{
if (!file_exists ($src )) {
return false ;
}
$dir = dirname ($tar );
if (!file_exists ($dir )) {
if (!self::createDir($dir )) {
return false ;
}
}
return copy ($src , $tar );
}
