WebUploader 上传图片回显
/*
fileMaxCount 最大文件数
buttonText 按钮文本
multiple 是否多选
*/
(function ($) {
$.fn.extend({
uploadImg: function (opt) {
var webUploader;
//可行性判断
if (!WebUploader.Uploader.support()) {
alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
throw new Error('WebUploader does not support the browser you are using.');
}
if (typeof opt != "object") {
alert('参数错误!');
return;
}
(function (opt, $uploaderDiv) {
// 可能有pedding, ready, uploading, confirm, done.
var state = 'pedding',
// 添加的文件数量
fileCount = 0,
// 优化retina, 在retina下这个值是2
//ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 700,
thumbnailHeight = 700,
// 判断浏览器是否支持图片的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;
})(), // $uploaderDiv = $(this),
$uploaderDivId = $uploaderDiv.attr('id'), //图片容器
$queue = $uploaderDiv.find('ul.filelist').length > 0 ? $("ul.filelist") : $('<ul class="filelist"></ul>').appendTo($uploaderDiv), //拖拽区域
$dndDiv = $('<div id="dndArea_' + $uploaderDivId + '" class="placeholder">').appendTo($uploaderDiv),
$dndDivId = $dndDiv.attr('id'), //点选区域
$pickerDiv = $(' <div id="filePicker_' + $uploaderDivId + '"></div>').appendTo($dndDiv),
$pickerDivId = $pickerDiv.attr('id'); //迭代出默认配置
$.each(getOption('#' + $uploaderDivId), function (key, value) {
opt[key] = opt[key] || value;
}); opt = $.extend(true, {}, opt, {
dnd: '#' + $dndDivId,
paste: '#' + $uploaderDivId,
//按钮容器;
pick: {
id: '#' + $pickerDivId,
label: '<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多' + (opt.fileMaxCount ? opt.fileMaxCount : opt['fileNumLimit']) + '张）</p>',
multiple: true
},
});
if (opt.buttonText) {
opt['pick']['label'] = opt.buttonText;
delete opt.buttonText;
}
if (!opt.multiple) {
opt['pick']['multiple'] = opt.multiple;
delete opt.multiple;
}
if (opt.fileMaxCount) {
opt['fileNumLimit'] = opt.fileMaxCount;
delete opt.fileMaxCount;
}
webUploader = WebUploader.create(opt);
//if (!WebUploader.Uploader.support()) {
// alert(' 上传组件不支持您的浏览器！');
// return false;
//}
//绑定文件加入队列事件;
webUploader.on('fileQueued', function (file) {
if (fileCount == opt.fileNumLimit) {
return NotifyDanger('上传文件数量超过限制!');
}
fileCount++;
addFile(file);
if (opt.fileNumLimit === fileCount) {
setState('ready');
}
});
webUploader.on('fileDequeued', function (file) {
fileCount--;
if (!fileCount || fileCount < opt.fileNumLimit) {
setState('pedding');
} removeFile(file); });
// 拖拽时不接受 js, txt 文件。
webUploader.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;
});
//选择文件错误触发事件;
webUploader.on('error', function (code) {
var text = '';
switch (code) {
case 'F_DUPLICATE': text = '该文件已经被选择了!';
break;
case 'Q_EXCEED_NUM_LIMIT': text = '上传文件数量超过限制!';
break;
case 'F_EXCEED_SIZE': text = '文件大小不能超过1M!';
break;
case 'Q_EXCEED_SIZE_LIMIT': text = '所有文件总大小超过限制!';
break;
case 'Q_TYPE_DENIED': text = '文件类型不正确或者是空文件!';
break;
default: text = '未知错误!';
break;
}
NotifyDanger(text);
});
webUploader.on('all', function (type) {
switch (type) {
case 'uploadFinished':
setState('confirm');
break;
case 'startUpload':
setState('uploading');
break;
case 'stopUpload':
setState('paused');
break; }
})
function setState(val) {
if (val === state) {
return;
}
state = val; switch (state) {
case 'pedding':
$dndDiv.removeClass('element-invisible');
//$queue.hide();
webUploader.refresh();
break;
case 'ready':
$dndDiv.addClass('element-invisible');
//$queue.show();
webUploader.refresh();
break;
}
}
// 当有文件添加进来时执行，负责view的创建
function addFile(file) {
var $li = $('<li id="' + file.id + '">' +
//'<p class="title">' + file.name + '</p>' +
'<a href="" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"></p></a>' +
//'<p class="progress"><span></span></p>' +
'</li>'), $btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span></div>').appendTo($li),
$prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $('<p class="error"></p>'),
$link = $li.find('a.linkA'); 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('预览中');
webUploader.makeThumb(file, function (error, src) {
if (error) {
$wrap.text('不能预览');
return;
} if (isSupportBase64) {
var img = $('<img src="' + src + '">');
$wrap.empty().append(img);
$link.attr('href', src);
} else {
$wrap.text("预览出错");
}
}, thumbnailWidth, thumbnailHeight);
} 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);
} else if (cur === 'interrupt') {
showError('interrupt');
} else if (cur === 'queued') {
} 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 () {
webUploader.removeFile(file); //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);
$li.remove();
}
})(opt, $(this)) //以下是图片回显的重点内容：先将图片转成File类型，然后通过addFiles把图片添加到队列。参考：https://segmentfault.com/q/1010000007428390
var pictureObj = new Object();
pictureObj.getPictures = function (opt) {
if (opt.pictures) {
//convertBase64UrlToBlob
var getFileBlob = function (url, cb) {
var bytes = window.atob(url); //去掉url的头，并转换为byte //处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
} cb(new Blob([ab], { type: 'image/jpeg' }));
}; var blobToFile = function (blob, name) {
blob.lastModifiedDate = new Date();
blob.name = name;
return blob;
}; var getFileObject = function (filePathOrUrl, cb) {
getFileBlob(filePathOrUrl, function (blob) {
cb(blobToFile(blob, 'test.jpg'));
});
};
var pictures = opt.pictures.split(',');
$.each(pictures, function (index, item) {
getFileObject(item, function (fileObject) {
var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'), fileObject);
var file = new WebUploader.File(wuFile);
webUploader.addFiles(file)
})
})
}
}
return pictureObj;
}
})
})(jQuery) //Web Uploader默认配置;
function getOption(objId) {
/*
* 配置文件同webUploader一致,这里只给出默认配置.
* 具体参照:http://fex.baidu.com/webuploader/doc/index.html
*/
return {
//按钮容器;
pick: {
id: objId,
label: '<i class="fa icon- create"></i><p class="filePickerText"><span>点击添加图片</span></p>',//'<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多20张）</p>',
multiple: true
},
//类型限制;
//accept: {
// title: "Images",
// extensions: "gif,jpg,jpeg,bmp,png,ico",
// mimeTypes: "image/*"
//},
//配置生成缩略图的选项
thumb: {
width: 170,
height: 150,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: "image/jpeg"
},
//文件上传方式
method: "POST",
tyty //fh;
tguty server: "",
//是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容
sendAsBinary: false,
// 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
chunked: true,
// 分片大小
chunkSize: 512 * 1024,
//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit: 50,
fileSizeLimit: 10240 * 1024,
fileSingleSizeLimit: 1024 * 1024,
};
} ////实例化Web Uploader
//function getUploader(opt) {
// return new WebUploader.Uploader(opt);
//
前台调用方式：
this.init_uploader_picture = function () { //实例化并绑定药品图片
$('#uploader_picture').uploadImg({
fileMaxCount: 1,
multiple: false,
//pictures: self.form.picture()
}).getPictures({
pictures: self.form.picture()
});
}
方式二：
/*
fileMaxCount 最大文件数
buttonText 按钮文本
multiple 是否多选
pictures base64图片，以逗号隔开
*/
(function ($) {
$.fn.extend({
diyUpload: function (opt) {
//可行性判断
if (!WebUploader.Uploader.support()) {
alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
throw new Error('WebUploader does not support the browser you are using.');
} if (typeof opt != "object") {
alert('参数错误!');
return;
} (function (opt, $uploaderDiv) { // 可能有pedding, ready, uploading, confirm, done.
var state = 'pedding', // 添加的文件数量
fileCount = 0, // 优化retina, 在retina下这个值是2
//ratio = window.devicePixelRatio || 1, // 缩略图大小
thumbnailWidth = 700,
thumbnailHeight = 700, // 判断浏览器是否支持图片的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;
})(), // $uploaderDiv = $(this),
$uploaderDivId = $uploaderDiv.attr('id'), //图片容器
$queue = $uploaderDiv.find('ul.filelist').length > 0 ? $("ul.filelist") : $('<ul class="filelist"></ul>').appendTo($uploaderDiv), //拖拽区域
$dndDiv = $('<div id="dndArea_' + $uploaderDivId + '" class="placeholder">').appendTo($uploaderDiv),
$dndDivId = $dndDiv.attr('id'), //点选区域
$pickerDiv = $(' <div id="filePicker_' + $uploaderDivId + '"></div>').appendTo($dndDiv),
$pickerDivId = $pickerDiv.attr('id'); //迭代出默认配置
$.each(getOption('#' + $uploaderDivId), function (key, value) {
opt[key] = opt[key] || value;
}); opt = $.extend(true, {}, opt, {
dnd: '#' + $dndDivId,
paste: '#' + $uploaderDivId,
//按钮容器;
pick: {
id: '#' + $pickerDivId,
label: '<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多' + (opt.fileMaxCount ? opt.fileMaxCount : opt['fileNumLimit']) + '张）</p>',
multiple: true
},
});
if (opt.buttonText) {
opt['pick']['label'] = opt.buttonText;
delete opt.buttonText;
}
if (opt.multiple) {
opt['pick']['multiple'] = opt.multiple;
delete opt.multiple;
}
if (opt.fileMaxCount) {
opt['fileNumLimit'] = opt.fileMaxCount;
delete opt.fileMaxCount;
}
//图片回显的另一种方式
if (opt.pictures) {
var pictures = opt.pictures.split(','); for (var i = 0; i < pictures.length; i++) {
fileCount++;
(function () {
//加载原来的图片
var href = "data:image/jpeg;base64," + pictures[i],
$li = $('<li id="PIC_WU_FILE_' + i.toString() + '">\
<a href="' + href + '" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"><img src="' + href + '"/></p></a>\
</li>'),
$btns = $('<div class="file-panel">\
<span class="cancel">删除</span>\
</div>').appendTo($li); $li.appendTo($queue); $li.on('mouseenter', function () {
$btns.stop().animate({ height: 30 });
}); $li.on('mouseleave', function () {
$btns.stop().animate({ height: 0 });
});
$btns.on('click', 'span', function () {
$(this).parent().parent().remove();
fileCount--;
if (!fileCount || fileCount < opt.fileNumLimit) {
$dndDiv.removeClass('element-invisible');
}
});
})(i)
} //上传照片数量等于限制数量时，隐藏上传按钮
if (pictures.length > 0 && opt.fileNumLimit && opt.fileNumLimit == fileCount) {
$dndDiv.addClass('element-invisible');
}
//重新设置限制文件个数参数
if (fileCount > 0) {
opt['fileNumLimit'] = opt.fileNumLimit - fileCount;
fileCount = 0;
}
} var webUploader = WebUploader.create(opt); //if (!WebUploader.Uploader.support()) {
// alert(' 上传组件不支持您的浏览器！');
// return false;
//} //绑定文件加入队列事件;
webUploader.on('fileQueued', function (file) {
fileCount++; addFile(file);
if (opt.fileNumLimit === fileCount) {
setState('ready');
}
});
webUploader.on('fileDequeued', function (file) {
fileCount--;
if (!fileCount || fileCount < opt.fileNumLimit) {
setState('pedding');
} removeFile(file); });
// 拖拽时不接受 js, txt 文件。
webUploader.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;
});
//选择文件错误触发事件;
webUploader.on('error', function (code) {
var text = '';
switch (code) {
case 'F_DUPLICATE': text = '该文件已经被选择了!';
break;
case 'Q_EXCEED_NUM_LIMIT': text = '上传文件数量超过限制!';
break;
case 'F_EXCEED_SIZE': text = '文件大小不能超过1M!';
break;
case 'Q_EXCEED_SIZE_LIMIT': text = '所有文件总大小超过限制!';
break;
case 'Q_TYPE_DENIED': text = '文件类型不正确或者是空文件!';
break;
default: text = '未知错误!';
break;
}
NotifyDanger(text);
//alert(text);
});
webUploader.on('all', function (type) {
switch (type) {
case 'uploadFinished':
setState('confirm');
break;
case 'startUpload':
setState('uploading');
break;
case 'stopUpload':
setState('paused');
break; }
})
function setState(val) {
if (val === state) {
return;
}
state = val; switch (state) {
case 'pedding':
$dndDiv.removeClass('element-invisible');
//$queue.hide();
webUploader.refresh();
break;
case 'ready':
$dndDiv.addClass('element-invisible');
//$queue.show();
webUploader.refresh();
break;
}
}
// 当有文件添加进来时执行，负责view的创建
function addFile(file) {
var $li = $('<li id="' + file.id + '">' +
//'<p class="title">' + file.name + '</p>' +
'<a href="" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"></p></a>' +
//'<p class="progress"><span></span></p>' +
'</li>'), $btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span></div>').appendTo($li),
$prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $('<p class="error"></p>'),
$link = $li.find('a.linkA'); 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('预览中');
webUploader.makeThumb(file, function (error, src) {
if (error) {
$wrap.text('不能预览');
return;
} if (isSupportBase64) {
var img = $('<img src="' + src + '">');
$wrap.empty().append(img);
$link.attr('href', src);
} else {
$wrap.text("预览出错");
}
}, thumbnailWidth, thumbnailHeight);
} 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);
} else if (cur === 'interrupt') {
showError('interrupt');
} else if (cur === 'queued') {
} 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 () {
webUploader.removeFile(file); //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);
$li.remove();
}
})(opt, $(this))
}
})
})(jQuery) //Web Uploader默认配置;
function getOption(objId) {
/*
* 配置文件同webUploader一致,这里只给出默认配置.
* 具体参照:http://fex.baidu.com/webuploader/doc/index.html
*/
return {
//按钮容器;
pick: {
id: objId,
label: '<i class="fa icon- create"></i><p class="filePickerText"><span>点击添加图片</span></p>',//'<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多20张）</p>',
multiple: true
},
//类型限制;
//accept: {
// title: "Images",
// extensions: "gif,jpg,jpeg,bmp,png,ico",
// mimeTypes: "image/*"
//},
//配置生成缩略图的选项
thumb: {
width: 170,
height: 150,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: "image/jpeg"
},
//文件上传方式
method: "POST",
//服务器地址;
server: "",
//是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容
sendAsBinary: false,
// 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
chunked: true,
// 分片大小
chunkSize: 512 * 1024,
//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit: 50,
fileSizeLimit: 10240 * 1024,
fileSingleSizeLimit: 1024 * 1024,
};
} ////实例化Web Uploader
//function getUploader(opt) {
// return new WebUploader.Uploader(opt);
//}
前台调用方式：
this.init_uploader_picture = function () { //实例化并绑定药品图片
$('#uploader_picture').uploadImg({
fileMaxCount: 1,
multiple: false,
pictures: self.form.picture()
});
}
WebUploader 上传图片回显的更多相关文章
- Kindeditor上传图片回显不出来
原因之一: 图片成功上传但是回显不出来,这个时候,要检查返回的图片地址是否加了http://这个玩意,不然会将原来的头加上图片返回地址.
- layui 上传图片回显并点击放大实现
1.页面代码布局 <div class="layui-col-xs12 form-group"> <div class="layui-col-xs6&q ...
- 前端上传图片回显并用base64编码，后端做解码储存，存储图片路径在.properties文件中配置（以上传身份证照片为例）
前端页面:<form id="kycForm" enctype="multipart/form-data"> <input type=&quo ...
- js实现上传图片回显功能
用到h5技术 <img id="headimg" src="<%=path%>/resources/images/icon4.png" sty ...
- js上传图片回显
$("#file01").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log(&qu ...
- 淘淘商城学习笔记 之 上传图片到远程服务器，图片的回显出现的bug
最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...
- 使用Dropzone上传图片及回显演示样例
一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...
- ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案
这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix” ...
- 图片上传并回显Ajax异步篇
图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...
随机推荐
- linux下终端字体彩色显示
linux下python彩色显示 跨平台彩色显示库https://pypi.python.org/pypi/colorama jlive@MacBook-Pro:py_demo $pytho ...
- 007 搜索API
1.说明 这个API用于在elasticsearch中搜索内容,用户可以通过发送以查询字符串为参数的get请求进行搜索,也可以在post请求的消息体中进行查询. 2.多索引 允许搜索所有的索引或某些特 ...
- c语言字符串分割函数（转）
源:C语言实现split以某个字符分割一个字符串 void split(char *src, const char *separator, char **dest, int *num) { /* sr ...
- Python的collections之namedtuple的使用及其优势
类实现: class User: def __init__(self, name, age, height): self.name = name self.age = age self.height ...
- 测试一下windowsLiveWriter
一个是看看这个东西能不能发布出博客,还有一个就是准备开始写博客了,所以随便写个作为开始吧,我不想多说什么目标啊,什么的,所以就这一句简单的一句话就够了.
- 使用Commons math做数值计算
使用Commons math做数值计算 觉得有用的话,欢迎一起讨论相互学习~Follow Me 最近使用jmetal做多目标的时候,想用一些简单的方法求最大值最小值方差和协方差矩阵,但是原生代码真的是 ...
- doris: shell invoke .sql script for doris and passing values for parameters in sql script.
1. background in most cases, we want to execute sql script in doris routinely. using azkaban, to l ...
- springboot 整合 Froala Editor 3
springboot项目中使用 Froala Editor 3,参考官网文档:https://www.froala.com/wysiwyg-editor/docs/overview 下载文件后,引入c ...
- delphi 多线程定时执行程序如何写
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- 机器学习中的数学-线性判别分析(LDA)
前言在之前的一篇博客机器学习中的数学(7)——PCA的数学原理中深入讲解了,PCA的数学原理.谈到PCA就不得不谈LDA,他们就像是一对孪生兄弟,总是被人们放在一起学习,比较.这这篇博客中我们就来谈谈 ...