jquery 上传图片

@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;
}

/*
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: '<li id="${fileID}' + opts.name + '"><span class="uploader-filename">${fileName} (${fileSize})</span><img class="uploader-loading" src="/imgs/loading.gif" /><span class="uploader-progress"></span></li>',//上传队列显示的模板,最外层标签使用<li>
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 = '<input class="uploadfile" style="visibility:hidden;height:1px;" type="file" accept="' + option.fileTypeExts + '"';
if (option.multi) {
inputstr += 'multiple';
}
inputstr += '/>';
inputstr += '<a href="javascript:void(0)" class="uploadfilebtn btn btn-sm btn-success">';
inputstr += option.buttonText;
inputstr += '</a>';
var fileInputButton = $(inputstr);
var uploadFileList = $('<ul class="filelist"></ul>');
_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)

<script type="text/javascript">

$(document).ready(function () {
$('#modal_list_uploader').html5uploader({
name: 'list',
auto: true,
multi: false,
removeTimeout: 100,
buttonText: '选择图片',
url: '/goods/up_list_img',
fileTypeExts: 'image/jpeg,image/png,image/webp',
onInit: function () {
},
onUploadStart: function () {
},
onUploadSuccess: function (file, res) {
console.log(res);
$('#form_img').val(res);
$('#form_img_preview').html('<img src="' + res + '" />');
},
onUploadError: function (file, res) {
alert(res);
},
onUploadComplete: function () {
}
});

})
</script>

<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="<?php echo $goodAR->id; ?>"/>

<div id="form_img_preview"><?php if ($goodAR->img != '') { ?><img
src="<?php echo $goodAR->img; ?>" /><?php } ?></div>

</div>

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;
}

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);
}