jQuery ajax提交
ajax提交
<script>
$(function(){$("#submit").on('click',function(){ //選擇id為submit的按鈕，點選時觸發函式
$.ajax({
type: 'POST',
url: "{:url('admin/update')}",
data: $(".layui-form").serialize(), //選擇class為layui-form的資料 serialize() 方法通過序列化表單值，建立 URL 編碼文字字串.
dataType: "json",
success: function(data){ //返回成功函式
console.log(data);
if (data.status == 1) {
alert(data.message);
window.location.href = "{:url('admin/index')}";
} else {
alert(data.message);
window.location.href = "{:url('admin/ediit')}";
}
}
})
})
})
</script>
<div id="file-pretty">
<input id="file_path" name="file" type="file" class="form-control" style="display:none">
<div class="input-append input-group">
<span class="input-group-btn">
<button id="btn_path" type="button" class="btn btn-white">選擇圖片</button>
</span>
<input id="info_path" type="text" name='img' class="form-control input-large" value="">
</div>
</div>
<script>
$(function(){
$('#btn_path').click(function(){
$("#file_path").click();//使用選擇圖片按鈕覆蓋原來的上傳檔案按鈕，當點選選擇圖片時，相當於點選上傳檔案按鈕。
});
//非同步上傳
//當id為file_path的元素髮生變化時執行函式。delegate為繫結一個事件。
http://www.365mini.com/page/jquery-delegate.htm（delegate的用法）
http://www.w3school.com.cn/jquery/event_change.asp（change的用法）
$("body").delegate("#file_path", 'change', function(){
var filepath = $("input[name='file']").val();var arr = filepath.split('.');
var ext = arr[arr.length-1];//圖片字尾
if('gif|jpg|png|bmp'.indexOf(ext)>=0){ //判斷ext中是否有gif,jpg... http://www.w3school.com.cn/jsref/jsref_indexOf.asp（indexof的用法）
$.ajaxFileUpload({url: '{:url('upload_image')}',
type: 'post',
data: { name: 'file' },// 選擇name為“file”的元素的資料（與上面的id選擇器進行比較 data: $(".layui-form").serialize()）
secureuri: false,
fileElementId: 'file_path',
dataType: 'json',
success: function (data, status) {
$('#info_path').val(data);
$('#info_path').focus(); //當元素獲得焦點時，發生 focus 事件。
http://www.w3school.com.cn/jquery/event_focus.asp（focus的用法）
error: function (data, status, e){
layer.alert('上傳失敗');
}
});
}else{
// 清空file
$('#file_path').val('');
layer.alert('請上傳合適的圖片型別');
}
});
});
</script>