H5拖拽 构造拖拽及缩放 pdf文件转换为html预览
前言：
协助项目需要实现一个签名的功能。
功能说明：1.有文本签名和头像签名。2.头像签名需要实现可拖拽功能。3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置。
功能一：实现拖拽
思路：H5拖拽及构造函数实现拖拽及缩放
要点：1.需要设置拖拽元素属性
draggable="true"
2.可拖拽的元素设置ondragstart获取数据
3.对可放置拖拽元素的设置ondragover函数
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
4.ondrop函数
设置放置后需要执行的方法。
/*H5拖拽并复制*/
var moveDemo=null;
var _type;
var divs=document.querySelectorAll(".left_list li");
var showBox=document.querySelector(".section_main_pdf");
for(var i=0;i<divs.length;i++){
divs[i].ondragstart=function(e){
moveDemo=this.querySelector("img");
_type=this.querySelector('.list_name').innerText;
}
};
showBox.ondragover =function(e){
e.preventDefault();
//console.log('x:'+ e.pageX+';y:'+ e.pageY);
};
showBox.ondrop=function(e){
var _clone=moveDemo.cloneNode();
this.append(_clone);
console.log(_clone);
_clone.className='dragIcon';
$(_clone).css({
'width':'100%',
'height':'100%'
}).attr('draggable',false);
$(_clone).wrap('<span class="img_outer"></span>');
if(_type=='Signature'){
$(_clone).parent().css({
'position':'absolute',
'top': e.pageY,
'left': e.pageX,
'cursor':'move',
'display':'inline-block',
'border':'2px solid'
}).append('<span class="iconResize" style="position:absolute;display: inline-block;width: 10px;height: 10px;' +
'cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;' +
'border:2px solid;border-radius:50%"></span>').attr({
'data-icon':'signature',
'data-page':config.defaultPage
});
}
else if(_type=='PIN'){
$(_clone).parent().css({
'position':'absolute',
'top': e.pageY,
'left': e.pageX,
'cursor':'move',
'display':'inline-block',
'border':'2px solid'
}).attr({
'data-icon':'pin',
'data-page':config.defaultPage
});
}
};
功能二：构造拖拽及缩放函数
思路：通过获取鼠标事件及元素位置
/*构造拖拽及缩放函数*/
$(document).mousemove(function(e) {
if (!!this.move) {
var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
callback = document.call_down || function() {
$(this.move_target).css({
'top': e.pageY - posix.y,
'left': e.pageX - posix.x
});
};
callback.call(this, e, posix);
}
}).mouseup(function(e) {
if (!!this.move) {
var callback = document.call_up || function(){};
callback.call(this, e);
$.extend(this, {
'move': false,
'move_target': null,
'call_down': false,
'call_up': false
});
}
});
备注于2017/7/26
而在拖拽过程中，由于说拖拽中也要限制不能拖拽出canvas画布外，于是又在构造函数这里添加了判断实现不可拖拽出canvas
附带如下代码：
$(document).mousemove(function(e) {
if (!!this.move) {
var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
callback = document.call_down || function() {
var _toTop=e.pageY-posix.y,
_toLeft=e.pageX-posix.x;
/*获取canvas左下角位置*/
var canvasHigh=$("#canvas").height();//pdf高
var canvasWid=$("#canvas").width();//pdf宽
var canvasPosTop=$("#canvas").offset().top;//pdf距离顶部
var canvasPosBottom=$("#canvas").offset().top+canvasHigh;//pdf底部距离顶部
var canvasPosLeft=$("#canvas").offset().left;//pdf距离左边
var canvasPosRight=canvasPosLeft+canvasWid;//pdf右边距离左边
if(_toTop < canvasPosTop){
_toTop = canvasPosTop
}
if(_toTop > (canvasPosBottom - $(this.move_target).height()) ){
_toTop = (canvasPosBottom - $(this.move_target).height())
}
if(_toLeft < canvasPosLeft){
_toLeft = canvasPosLeft
}
if(_toLeft > (canvasPosRight - $(this.move_target).width()) ){
_toLeft =(canvasPosRight - $(this.move_target).width())
}
$(this.move_target).css({
'top': _toTop ,//e.pageY - posix.y,
'left': _toLeft//e.pageX - posix.x
});
};
callback.call(this, e, posix);
}
})
功能三：pdf展示
要点：引入pdf.js和pdf.worker.js进行API解析和核心解析
说明：1.pdf.js不能打开本地文件，需要服务器启动
2.需要Firefox下运行报错才有提示(firefox的pdf解析)
var loadingTask=PDFJS.getDocument(config.url);
loadingTask.promise.then(
function getPdf(pdf){
pdf.getPage(config.defaultPage).then(
function getPage(page){
var scale=1;
var viewport=page.getViewport(scale);
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.height=config.outerHigh;
canvas.width=config.outerWid;
var renderContext={
canvasContext:context,
viewport:viewport
};
page.render(renderContext);
},
function pageError(msg){
console.log(msg);
}
)
},
function pdfError(msg){
alert(msg);
}
);
备注于2017/7/26
由于pdf文件的大小各异，于是进行了如下调整，是canvas展示的pdf进行缩放显示
调整上段代码后的结果：
var loadingTask=PDFJS.getDocument(config.url);
loadingTask.promise.then(
function getPdf(pdf){
pdf.getPage(config.defaultPage).then(
function getPage(page){
var scale=1;
var viewport=page.getViewport(scale);
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var ch2vh=(config.outerHigh/viewport.height).toFixed(2),
cw2vw=(config.outerWid/viewport.width).toFixed(2);
if(ch2vh < cw2vw){
viewport=page.getViewport(ch2vh);
}else{
viewport=page.getViewport(cw2vw);
}
canvas.height=config.outerHigh;
canvas.width=config.outerWid;
var renderContext={
canvasContext:context,
viewport:viewport
};
page.render(renderContext);
},
function pageError(msg){
console.log(msg);
}
)
},
function pdfError(msg){
alert(msg);
}
);
汇总：
1.签名js文件
备注：在交付的时候那边发现了在ie下拖拽时获取的图片有问题，然后又来找到了我，经过一轮的调试(ps：ie调试真不爽)，
发现获取字符串时候，ie好像默认添加了空格符，所以进不了if语句，现见if判断调整为：
if(
(_type).toLowerCase().trim()=='signature'
)
elseif同理。
再则ie报错不支持append()，所以将this.append()调整为this.appendChild()。
(备注：调整于2017/07/05)
$(function(){
/*H5拖拽并复制*/
var moveDemo=null;
var _type;
var divs=document.querySelectorAll(".left_list li");
var showBox=document.querySelector(".section_main_pdf");
for(var i=0;i<divs.length;i++){
divs[i].ondragstart=function(e){
moveDemo=this.querySelector("img");
_type=this.querySelector('.list_name').innerText;
}
};
showBox.ondragover =function(e){
e.preventDefault();
//console.log('x:'+ e.pageX+';y:'+ e.pageY);
};
showBox.ondrop=function(e){
var _clone=moveDemo.cloneNode();
this.append(_clone);
console.log(_clone);
_clone.className='dragIcon';
$(_clone).css({
'width':'100%',
'height':'100%'
}).attr('draggable',false);
$(_clone).wrap('<span class="img_outer"></span>');
if(_type=='Signature'){
$(_clone).parent().css({
'position':'absolute',
'top': e.pageY,
'left': e.pageX,
'cursor':'move',
'display':'inline-block',
'border':'2px solid'
}).append('<span class="iconResize" style="position:absolute;display: inline-block;width: 10px;height: 10px;' +
'cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;' +
'border:2px solid;border-radius:50%"></span>').attr({
'data-icon':'signature',
'data-page':config.defaultPage
});
}
else if(_type=='PIN'){
$(_clone).parent().css({
'position':'absolute',
'top': e.pageY,
'left': e.pageX,
'cursor':'move',
'display':'inline-block',
'border':'2px solid'
}).attr({
'data-icon':'pin',
'data-page':config.defaultPage
});
}
};
/*构造拖拽及缩放函数*/
$(document).mousemove(function(e) {
if (!!this.move) {
var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
callback = document.call_down || function() {
$(this.move_target).css({
'top': e.pageY - posix.y,
'left': e.pageX - posix.x
});
};
callback.call(this, e, posix);
}
}).mouseup(function(e) {
if (!!this.move) {
var callback = document.call_up || function(){};
callback.call(this, e);
$.extend(this, {
'move': false,
'move_target': null,
'call_down': false,
'call_up': false
});
}
});
/*实例化*/
$(document).on('mousedown','.img_outer',function(e){
var offset=$(this).offset();
this.posix={
'x': e.pageX-offset.left,
'y': e.pageY-offset.top
};
$.extend(document,{
'move':true,
'move_target':this
});
});
$(document).on('mousedown','.iconResize',function(e){
var that=this;
var posix = {
'w': $(this).parent().width(),
'h': $(this).parent().height(),
'x': e.pageX,
'y': e.pageY
};
$.extend(document, {'move': true, 'call_down': function(e) {
$(that).parent().css({
'width': Math.max(30, e.pageX - posix.x + posix.w),
'height': Math.max(30, e.pageY - posix.y + posix.h)
});
}});
return false;
});
//获取选中元素
$(document).on('click','.img_outer',function(e){
$(".img_outer").removeClass("active");
var _active=$(this).hasClass("active");
if(_active){
$(this).removeClass("active");
}else{
$(this).addClass("active");
}
});
/*渲染PDF*/
/* var _container=$(".section_main_pdf");
PDFJS.workerSrc='js/pdf.worker.js';
var config={
//url:'txt/userAgreeDoc.pdf',//pdf路径
url:'txt/webpack.pdf',
outerHigh:_container.height(),//容器高
outerWid:_container.width(),//容器宽
defaultPage:1,//默认第一页
totalPage:6//总页数
};*/
renderPdf();
/*上一页*/
$("input.page_pre").on('click',function(){
if(config.defaultPage>1){
--config.defaultPage;
$(".page_num_cur").text(config.defaultPage);
renderPdf();
}
});
/*下一页*/
$("input.page_next").on('click',function(){
if(config.defaultPage<config.totalPage){
++config.defaultPage;
$(".page_num_cur").text(config.defaultPage);
renderPdf();
}
});
/*GO*/
$("input.page_go_val").on('click',function(){
var _val=$("input.page_val").val();
if(_val>0 && _val<=config.totalPage){
config.defaultPage=parseInt(_val);//pdf不会自动转换字符串为数字
console.log(config.defaultPage);
$(".page_num_cur").text(_val);
renderPdf();
}
});
function renderPdf(){
var loadingTask=PDFJS.getDocument(config.url);
loadingTask.promise.then(
function getPdf(pdf){
pdf.getPage(config.defaultPage).then(
function getPage(page){
var scale=1;
var viewport=page.getViewport(scale);
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.height=config.outerHigh;
canvas.width=config.outerWid;
var renderContext={
canvasContext:context,
viewport:viewport
};
page.render(renderContext);
},
function pageError(msg){
console.log(msg);
}
)
},
function pdfError(msg){
alert(msg);
}
);
//对不在当前页面的签名进行隐藏或显示
var lists=$(".section_main_pdf .img_outer");
for(var i=0;i<lists.length;i++){
if(lists.eq(i).data('page')==config.defaultPage){
lists.eq(i).css({
'visibility':'visible'
});
}else{
lists.eq(i).css({
'visibility':'hidden'
});
}
}
}
});
//选择头像
$(document).on('change','#selectUser',function(e){
//通过字符串拼接选中值来实现切换图片
var _val=$(this).find('option:selected').val();
var _imgVal=$(".img_outer.active");
if(_val=='spouse'){
_imgVal.find('img').attr({
'src':'images/pin.png'
});
_imgVal.attr('data-id',_val);
}
});
//保存信息
$(document).on('click','#saveMsg',function(e){
/*获取canvas左下角位置*/
var canvasHigh=$("#canvas").height();//pdf高
var canvasWid=$("#canvas").width();//pdf宽
//console.log('canvasHigh:'+canvasHigh);
var canvasPosTop=$("#canvas").offset().top;//pdf距离顶部
var canvasPosBottom=$("#canvas").offset().top+canvasHigh;//pdf底部距离顶部
var canvasPosLeft=$("#canvas").offset().left;//pdf距离左边
var canvasPosRight=canvasPosLeft+canvasWid;//pdf右边距离左边
//console.log('canvasPosTop:'+canvasPosTop+';canvasPosLeft:'+canvasPosLeft);
/*遍历获取每个签名的位置*/
var obj=new Array();
var lists=$(".section_main_pdf .img_outer");
for(var i=0;i<lists.length;i++){
var _left=parseInt(lists.eq(i).css('left'));
if(_left<canvasPosLeft || _left> canvasPosRight){
alert('请在文件中签名');
return;
}
var _top=parseInt(lists.eq(i).css('top'));
if(_top<canvasPosTop || _top>canvasPosBottom){
alert('请在文件中签名');
return;
}
var arr={
type:lists.eq(i).data('icon'),//签名类型
wid:lists.eq(i).width(),//签名的宽
high:lists.eq(i).height(),//签名的高
id:lists.eq(i).data('id'),//用户id
x:_left-canvasPosLeft,//距离pdf左下角的x,
y:Math.abs(_top+lists.eq(i).height()-canvasPosBottom),//距离pdf左下角的y,
page:lists.eq(i).data('page'),//签名所在页
};
obj.push(arr);
}
console.log('obj:'+JSON.stringify(obj));
//下一步：异步提交
});
js
2.签名html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>签名</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/signature.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="header_inner clearfix">
<div class="header_left">
<span class="header_left_name">webpack中文指南.pdf</span>
</div>
<div class="header_right">
<input id="saveMsg" type="button" value="Save" class="header_right_save">
</div>
</div>
</div>
<div class="section clearfix">
<div class="section_left">
<h3 class="left_title">Select and Drag Icon</h3>
<ul class="left_list">
<li draggable="true">
<span class="img_outer">
<img src="data:images/signature.png">
</span>
<span class="list_name">
Signature
</span>
</li>
<li draggable="true">
<span class="img_outer">
<img src="data:images/pin.png">
</span>
<span class="list_name">
PIN
</span>
</li>
</ul>
</div>
<div class="section_main">
<div class="section_main_pdf">
<canvas id="canvas"></canvas>
</div>
<div class="section_main_page">
<div class="page clearfix">
<div class="page_detail">
<input type="button" value="<" class="page_pre">
<span class="page_num">
<span class="page_num_cur">1</span>
/
<span class="total_page">29</span>
</span>
<input type="button" value=">" class="page_next active">
</div>
<div class="page_go">
<span class="page_go_page">Page</span>
<input type="text" class="page_val">
<input type="button" value="GO" class="page_go_val"/>
</div>
</div>
</div>
</div>
<div class="section_right">
<h3 class="right_title">Select the Signature</h3>
<div class="right_select">
<select id="selectUser">
<option>Please Select</option>
<option value="spouse">Spouse</option>
</select>
</div>
</div>
</div>
</div> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<!--API解析-->
<script src="js/pdf.js"></script>
<!--核心解析-->
<!--<script src="js/pdf.worker.js"></script>-->
<script src="js/signature.js"></script>
<script>
/*渲染PDF*/
var _container=$(".section_main_pdf");
PDFJS.workerSrc='js/pdf.worker.js'; var config={
//url:'txt/userAgreeDoc.pdf',//pdf路径
url:'txt/webpack.pdf',
outerHigh:_container.height(),//容器高
outerWid:_container.width(),//容器宽
defaultPage:1,//默认第一页
totalPage:29//总页数
};
</script>
<script src="js/responseData.js"></script>
<script>
</script>
</body>
</html>
html
3.签名已存在时的反显
备注：之前上传的版本后来发现了位置反显有误，调整了.img_outer的top位置：
top:'+(this.canvasBottom-resData[i].y-resData[i].high)+'px;
(修改时间：17/06/30)
/**
* Created by aaron on 2017/6/16.
*/ //var data=[{"type":"pin","wid":44,"high":44,"x":332,"y":379,"page":1},{"type":"signature","wid":44,"high":44,"x":187,"y":608,"page":1}]; (function($,window,undefined){
var resData={
canvasLeft:$(".section_main_pdf").offset().left,
canvasBottom:$(".section_main_pdf").height()+$(".section_main_pdf").offset().top,
init:function(){
this.getData();
},
getData:function(){
var that=this;
$.ajax({
url:'./data/signature.json',
type:'post',
dataType:'json',
async:false,
success:function(data){
console.log(data);
if(data.isSuccess){
that.resolveData(data.dataList);
}
}
})
},
resolveData:function(data){
console.log(this);
console.log(JSON.stringify(data));
var html='';
var resData=data;
console.log('resData:'+resData.length);
for(var i=0;i<resData.length;i++){
html+='<span class="img_outer" data-icon="'+resData[i].type+'" data-page="'+resData[i].page+'" ' +
'style="position:absolute;cursor:move;display:inline-block;border:2px solid;top:'+(resData[i].y+this.canvasBottom-resData[i].high)+'px;' +
'left:'+(resData[i].x+this.canvasLeft)+'px;width:'+(resData[i].wid+4)+'px;height:'+(resData[i].high+4)+'px;">' ;
if(resData[i].type=='signature'){
html+='<img src="" class="dragIcon" style="width: 100%;height: 100%"/>'+
'<span class="iconResize" style="display: inline-block;width:10px;position:absolute;' +
'height:10px;cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;border:2px solid ;border-radius:50%"></span>';
}else{
html+='<img src="" class="dragIcon" style="width: 100%;height: 100%"/>';
}
html+='</span>';
}
$(".section_main_pdf").append(html);
}
};
resData.init();
})(jQuery,window,undefined);
setData
4.样式css
/*CSS RESET*/
@charset "utf-8";
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
img, small, strong,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
margin:;
padding:;
border:;
outline:;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/*重置界面字体字号色号*/
body {
font-family:'Microsoft YaHei',"Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
font-size:16px;
color:#000000;
min-width:1200px;
}
dl li,ul li{
list-style-type: none;
}
a {
margin:;
padding:;
font-size:100%;
text-decoration: none;
vertical-align:baseline;
background:transparent;
}
table {
border-collapse:collapse;
border-spacing:;
}
i,b{
font-style: normal;
font-weight: normal;
}
img{
border:;
vertical-align: middle;
}
*{
box-sizing: border-box;
}
/*清除浮动*/
.clearfix:after{
content:'';
display:block;
height:;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:;
} /*重置input/select样式*/
input,select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
} ::-webkit-input-placeholder {
color: #d2d2d2; }
:-moz-placeholder {
color: #d2d2d2; }
::-moz-placeholder {
color: #d2d2d2; }
:-ms-input-placeholder {
color: #d2d2d2; }
input:focus::-webkit-input-placeholder{ color:#d2d2d2;}
reset
@charset "utf-8";
body{
background-color: #e2e2ee;
}
.header{
width: 100%;
background-color:#3d62ad;
}
.header .header_inner,.section{
width: 1200px;
margin:0 auto;
}
.header .header_inner{
line-height: 60px;
}
.header .header_left{
float: left;
}
.header .header_left_name{
font-size: 18px;
color:#ffffff;
}
.header .header_right{
float: right;
}
.header input.header_right_save{
font-size: 16px;
width: 140px;
height: 34px;
line-height: 34px;
background-color: #ffffff;
color:#3d62ad;
border:;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
} .section .section_left{
float: left;
width: 230px;
background-color: #ffffff;
margin-right: 20px;
min-height: 840px;
}
.section .section_main{
float: left;
width: 700px;
background-color: #ffffff;
min-height: 840px;
}
.section .section_right{
float: right;
width: 230px;
background-color: #ffffff;
min-height: 840px;
} .section h3.left_title,
.section h3.right_title{
line-height: 55px;
text-align: center;
}
/*实现可拖拽*/
.section ul.left_list li{
display: inline-block;
width: 230px;
height: 45px;
line-height: 45px;
padding-left: 25px;
margin:10px 0;
color:#3d62ad;
cursor: move;
}
.section span.list_name{
margin-left:15px;
}
.section ul.left_list li:first-child{
margin-top:;
} .section_main .section_main_pdf{
width: 550px;
height: 755px;
margin: 15px auto;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.30);
}
.section_main .page{
width: 310px;
height: 45px;
line-height: 45px;
margin: 0 auto;
}
.section_main .page_detail{
float: left;
}
.section_main .page_go{
float: right;
}
.section_main input.page_pre,
.section_main input.page_next{
width: 22px;
height: 22px;
line-height: 22px;
color:#a7a7a7;
background-color:#e9edf5;
border:;
cursor: pointer;
}
.section_main input.page_pre.active,
.section_main input.page_next.active{
color:#3d62ad;
}
.section_main span.page_num{
padding:0 10px;
}
.section_main span.page_num_cur{
color:#3d62ad;
} .section_main input.page_val{
width: 35px;
height: 20px;
line-height: 20px;
margin:0 2px 0 10px;
text-align: center;
border:1px solid #3d62ad;
}
.section_main input.page_go_val{
font-weight:;
color:#3d62ad;
background-color: transparent;
border:;
font-size: 16px;
cursor: pointer;
}
input:focus{
outline: none;
} .section_right{
text-align: center;
}
.section_right .right_select{
width: 185px;
height: 29px;
line-height: 29px;
margin: 0 auto;
position: relative;
}
.section_right .right_select:after{
position: absolute;
content: '';
right: 1px;
top: 1px;
display: inline-block;
width: 34px;
height: 27px;
background:url("../images/arrow_bottom.png") no-repeat center;
color:#ffffff;
z-index:;
}
.section_right .right_select select{
width: 185px;
height: 29px;
padding:0 34px 0 15px ;
border:1px solid #6b6e82;
outline: none;
background-color: transparent;
position: absolute;
left:;
top:;
z-index:;
} .img_outer.active{
border-color:#3d62ad !important;
}
css
5.文件结构
H5拖拽 构造拖拽及缩放 pdf文件转换为html预览的更多相关文章
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- H5拖拽 构造拖拽及缩放 pdf展示
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- Azure SQL 数据库的灵活缩放预览版简介
Eron Kelly SQL Server 产品管理部门产品市场营销总经理 几天前,我们宣布了发布 Azure SQL 数据库的灵活缩放公共预览版.新增的灵活缩放功能通过简化开发和管理,简化了扩展和缩 ...
- iOS-UICollectionView快速构造/拖拽重排/轮播实现
代码地址如下:http://www.demodashi.com/demo/11366.html 目录 UICollectionView的定义 UICollectionView快速构建GridView网 ...
- H5实现多图片预览上传，可点击可拖拽控件介绍
版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- 可拖拽和带预览图的jQuery文件上传插件ssi-uploader
插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
随机推荐
- Linux chkconfig命令详解
chkconfig命令检查.设置系统的各种服务.这是Red Hat公司遵循GPL规则所开发的程序,它可查询操作系统在每一个执行等级中会执行哪些系统服务,其中包括各类常驻服务.谨记chkconfig不是 ...
- 多台服务器共享session问题
在现在的大型网站中,如何实现多台服务器中的session数据共享呢 当使用多台服务器架设成集群之后,我们通过负载均衡的方式,同一个用户(或者ip)访问时被分配到不同的服务器上,假设在A服务器登录,如果 ...
- windows 2012R2 上必须要用sharepoint 2013 sp1.
已经确认. 虽然有人讲以下powershell可以帮助安装sharepoint 2013. 不过不是每次都可以的 Import-Module ServerManager Add-WindowsFeat ...
- BZOJ2286:[SDOI2011]消耗战(树形DP,虚树)
Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军 ...
- 2743: [HEOI2012]采花
Description 萧芸斓是Z国的公主,平时的一大爱好是采花.今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花 .花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一 ...
- Discuz!教程之删除注释云平台JS，加快DISCUZ访问
很多站长反应打开网站的时候有个http://discuz.gtimg.cn/cloud/scripts/discuz_tips.js?v=1一直在加载中,导致网页打开速度很慢,这个时候你可以按本文教程 ...
- jenkins webhook 配置
1. 安装插件 系统管理"->"插件管理"->"可选插件",选择Gitlab Hook Plugin GitLab Plugin,Gitl ...
- 【node.js】Stream(流)
Stream 有四种流类型: Readable - 可读操作. Writable - 可写操作. Duplex - 可读可写操作. Transform - 操作被写入数据,然后读出结果. 所有的 St ...
- Jenkins启动和停止服务
1.怎么启动Jenkins? step1:进入到Jenkins的war包所在的目录. 如果是win7及以上版本,直接打开Jenkins的war包所在的目录,在地址栏敲cmd,回车. 上述结果和进入cm ...
- php官网下载的chm手册，源码字号太小的问题解决
首先,到官方网站上下载chm格式的文档,地址如下: http://php.net/downloads.php 如图,点击荧光笔标出链接 然后就可以看到各种语言版本的文档手册,可以选择中文版,并带有笔记 ...