layer上傳文件
1. layer插件如何彈出自定義div
剛好今天我也遇到這個問題,摸索了幾個小時,搞定了,關鍵語法如下:
layer.open({
type:1,
content:$('#id')//這里content是一個DOM,這個元素要放在body根節點下
});
所以你這個就應該是:
content:$('#wrapper')
實例:
<!DOCTYPEHTML><html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<scriptsrc="jquery-1.9.1.min.js"></script>
<scriptsrc="layer/layer.js"></script>
<script>
$(function(){
$("a").click(function(){
layer.open({
type:1,
closeBtn:false,
shift:2,
shadeClose:true,
content:$("#box1")
});
})
})
</script>
<style>
*{padding:0;margin:0;}
#box1{width:555px;height:600px;background:#eee;display:none;}
</style>
</head>
<body>
<ahref="#">點擊</a>
<divid="box1">
111
</div>
</body>
</html>
2. layui.upload上傳文件的同時怎麼傳遞一個參數
在 before 回調裡面 執行追加 隱藏input的操作,裡面放你的參數 $('.layui-upload-file').after( '<input type="hidden" name="xxxx" value="xxxx" />' );
這種方式只能傳遞靜態參數,對於select的值好像獲取不到
3. 百度上傳控制項webuploader如何限制 圖片尺寸大小
可以通過mimeTypes判斷圖片類型,fileNumLimit: xx,//上傳數量限制,fileSizeLimit: xx,//限制上傳所有文件大小,fileSingleSizeLimit: xx,//限制上傳單個文件大小
java">accept:{//只允許選擇圖片文件格式
title:'Images',
extensions:'gif,jpg,bmp,png',
mimeTypes:'image/*'
},
/**
*驗證文件格式以及文件大小
*/
uploader.on("error",function(type){
if(type=="Q_TYPE_DENIED"){
layer.msg("請上傳JPG、PNG、GIF、BMP格式文件");
}elseif(type=="Q_EXCEED_SIZE_LIMIT"){
layer.msg("文件大小不能超過2M");
}else{
layer.msg("上傳出錯!請檢查後重新上傳!錯誤代碼"+type);
}
});
4. java 使用 AjaxUpload.js 實現上傳文檔的時候需要注意哪些
ajax是無法提交文件的,所以在上傳圖片並預覽的時候,我們經常使用Ifame的方法實現看似非同步的效果。但是這樣總不是很方便的,AjaxFilleUpload.js對上面的方法進行了一個包裝,使得我們不用去管理Iframe的一系列操作,也不用影響我們的頁面結構,實現非同步的文件提交。
html:
復制代碼 代碼如下:
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />
js:
復制代碼 代碼如下:
$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要鏈接到伺服器地址
secureuri:false,
fileElementId:'file_upload', //文件選擇框的id屬性
dataType: 'text', //伺服器返回的格式,可以是json、xml
success: function (data, status) //相當於java中try語句塊的用法
{
$('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相當於java中catch語句塊的用法
$('#restoreDialog').html("上傳失敗,請重試");
}
});
這個方法還會出現一個問題,就是input只能使用一次的問題,input第二次的onchange將不會被執行,這應該是與瀏覽器的有關,解決辦法就是替換這個input
像這樣:
復制代碼 代碼如下:
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
5. layer和jquery是什麼關系知乎
/*
先去官網下載最新的jshttp://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js
*/
觸發彈層的事件可自由綁定,如:
$('#id').on('click',function(){
layer.msg('test');
});
下面主要貼出上述例子的調用代碼:
【信息框】:
layer.alert('白菜級別前端攻城師賢心',8);//風格一
layer.msg('前端攻城師賢心');//風格二
//當然,遠遠不止這兩種風格。
【詢問框】:
$.layer({
shade:[0],
area:['auto','auto'],
dialog:{
msg:'您是如何看待前端開發?',
btns:2,
type:4,
btn:['重要','奇葩'],
yes:function(){
layer.msg('重要',1,1);
},no:function(){
layer.msg('奇葩',1,13);
}
}
});
//還可用layer.confirm()快捷調用
【頁面層一】
$.layer({
type:1,
shade:[0],
area:['auto','auto'],
title:false,
border:[0],
page:{dom:'.layer_notice'}
});
【頁面層二】
varpageii=$.layer({
type:1,
title:false,
area:['auto','auto'],
border:[0],//去掉默認邊框
shade:[0],//去掉遮罩
closeBtn:[0,false],//去掉默認關閉按鈕
shift:'left',//從左動畫彈出
page:{
html:'<divstyle="width:420px;height:260px;padding:20px;border:1pxsolid#ccc;background-color:#eee;"><p>我從左邊來,我自定了風格。</p><buttonid="pagebtn"class="btns"onclick="">關閉</button></div>'
}
});
//自設關閉
$('#pagebtn').on('click',function(){
layer.close(pageii);
});
【iframe層一】
$.layer({
type:2,
shadeClose:true,
title:false,
closeBtn:[0,false],
shade:[0.8,'#000'],
border:[0],
offset:['20px',''],
area:['1000px',($(window).height()-50)+'px'],
iframe:{src:'http://f2e.sentsin.com/chat'}
});
【iframe層二】
layer.tips('5秒後右下角窗口自動關閉,並生成一個新的iframe',this,{
time:5,
maxWidth:260
});
$.layer({
type:2,
closeBtn:false,
shadeClose:true,
shade:[0.1,'#fff'],
border:[0],
time:5,
iframe:{
src:'test/guo.html'
},
title:false,
area:['300px','250px'],
shift:'right-bottom',
end:function(){
$.layer({
type:2,
title:'賢心博客-sentsin.com',
shadeClose:true,
maxmin:true,
fix:false,
area:['1024px',500],
iframe:{
src:'http://sentsin.com/'
}
});
}
});
【載入層一】
layer.load(3);
【載入層二】
layer.load('載入帶文字',3);
【tips層一】
layer.tips('tips的樣式並非是固定的,您可自定義外觀。',this,{
style:['background-color:#78BA32;color:#fff','#78BA32'],
maxWidth:185,
time:3,
closeBtn:[0,true]
});
【tips層二】
layer.tips('默認沒有關閉按鈕',this,{guide:1,time:2});
【輸入/文件層】
//普通文本
layer.prompt({title:'您的名字?'},function(name){
alert(name);
});
//密碼文本
layer.prompt({title:'輸入任何口令,並確認',type:1},function(pass){
alert(pass);
});
//文件上傳
layer.prompt({title:'隨便上傳個東東,並確認',type:2},function(file){
alert(file);
});
//多行文本
layer.prompt({title:'隨便寫點啥,並確認',type:3},function(val){
alert(val);
});
【tab層】
layer.tab({
area:['1000px','500px'],
data:[
{title:'Say',content:'Hi,Main'},
{title:'無題',content:'支持html傳入'}
]
});
【相冊層】
//此處為非同步請求模式,具體的json格式,請等待文檔更新。或者你直接通過請求看photos.json
varconf={};
$.getJSON('ajax地址',{},function(json){
conf.photoJSON=json;//保存json,以便下次直接讀取內存數據
layer.photos({
html:'這里傳入自定義的html,也可以不用傳入(這意味著不會輸出右側區域)。相冊支持左右方向鍵、Esc關閉',
json:json
});
});
6. shapefile與layer文件的區別是什麼
Layer文件(.lyr)是存儲一個源數據集和其他圖層屬性路徑的文件,其中包括符號。
與shapefile相比,layer文件只是真實數據如shapefile、要素類等的一種連接或參考。它不是真正的數據因為它不存儲數據的屬性和幾何圖形。Layer文件主要存儲要素符號和其他在GIS應用中數據可視化有關的圖層屬性。
例如,如果一個layer文件被發送給其他機器上的用戶但沒有源數據時,將由於沒有包含源數據而不會顯示在地圖中。為將數據正確的顯示出來,用戶必須具備其layer文件和相應的shapefile。
這是利用圖層包使數據移植簡易的原因,因為圖層包中存儲了layer文件和源數據。關於圖層包的更多信息,請參考在線幫助「創建圖層包」。
7. jquery layer插件需要載入哪些文件
載入layer.js就可以了,只要去官網把包下載下來將解壓的文件夾復制到項目的目錄下,引入layer.js就可以。另:官網下載的包都有一個dome。註:使用layer.js對jquery有要求,需1.8版本以上的。希望能幫到你!
8. layer.open打開一個html頁面,content應該怎麼傳值
1、可以是moudle分配過來的值 ,也可以是頁面中元素的值。
2、用js獲取這個值,再寫到內容content裡面,即可。
3、 運用這個公式 : 23456789<inputtype="hidden"id="xxx"value="{$xxx}"/><script>varmy_content=$('#xxx').val();layer.open({title:'標題',content:my_content'});</script>
4、寫到內容content我們就可以正常的利用,open打開一個html頁面,content傳值了。
9. 用js腳本,怎麼實現彈出選擇圖片的對話框,並將文件上傳到伺服器
彈出框用框架(layer.js,具體使用可參考官方文檔)。
HTML如下:
!!! 注意這種提交會刷新頁面
<formname="upload-file"method="post"enctype="multipart/form-data">
<labelfor="upload-file">上傳</label>
<inputid="upload-file"type="file"name="images"hidden="hidden">
<inputtype="submit"value="提交">
</form>
提交過後後端就可以獲取到圖片(PHP獲取代碼如下:$_POST['images'];)
10. layui中layer如何使用
有兩種方式可以使用,第一種使用layui載入layer模塊,引入相關文件即可。