js的回調函數 一些例子

這邊用bootstrap 3.0的  上傳控件做例子

下面是上傳控件的一段完整的 js 操作 代碼。

 

<!-- 上傳縮略圖控件配置 -->
<script>
// 定義這四個全局變量是 為了保存4張圖片的uuid 在回調函數中每次保存 都覆蓋前一張的名字 實現 用戶可以重復添加取最終的結果保存入庫
window.Picture1=""; //輪播圖1的全局變量
window.Picture2=""; //輪播圖2的全局變量
window.Picture3=""; //輪播圖3的全局變量
window.Thumbnail=""; //縮略圖的全局變量

//一個實時的判斷 確保每次縮略圖只顯式一張
function reuploadThumbnails(){ //重新加載縮略圖
var filepreview=document.getElementsByClassName('file-preview-thumbnails');
var fileframs=filepreview[0].getElementsByClassName('file-preview-frame');
var delInitPic=filepreview[0].getElementsByClassName('file-preview-initial');
var a = $('div.file-preview-initial ')
a.hide();
console.log("圖片數量"+fileframs.length);
if(fileframs.length>=2){ //一個實時的判斷 確保每次縮略圖只顯式一張
var self=fileframs[0];
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
console.log(removed === self); // true
}
}

$("#thumbnailPic").fileinput({
language: 'zh', //設置語言
/* uploadUrl: 'uploadFiles/uploadFarmdefPics', */
uploadUrl: 'farmlandLandDef/uploadFarmLandDetailPics?kind=thumbnail',
allowedFileExtensions : ['jpg', 'png','gif'],
overwriteInitial: false,
initialPreviewCount:1,
showCaption:false, //是否顯示文件的標題。默認值true
browseClass: "btn btn-primary", //按鈕樣式
initialPreviewShowDelete: true,
maxFileCount: 1, //最大上傳數量
maxFileSize: 400,
maxFilesNum: 1,
initialPreview:"請上農作物生長周期圖，支持拖拽圖片上傳", //配置預覽圖的界面可以為 img text或者other
slugCallback: function(filename) {
reuploadThumbnails(); //保證縮略圖只有一張
return filename.replace('(', '_').replace(']', '_');
}
});
// 注意 有預覽功能的上傳控件 綁定的 回調事件名字和 無預覽功能的不一樣
$("#thumbnailPic").on("fileuploaded", function (event, data, previewId, index) {
//console.log(data.files[0]['name']);
//console.log(data);
//var path='http://127.0.0.1:8080/img/uploadFarmdefThumbnailPics/';
var jsonarray = eval("(" +data.jqXHR.responseText+ ")"); //將json字符串轉換為json對象
var uuid =jsonarray.uuid;
window.Thumbnail=uuid;
if(window.Thumbnail!=""){
$("#thumbnailImg1").tips({
side:2,
msg:'圖片上傳成功！',
bg:'#AE81FF',
time:2
});
}
});

$("#thumbnailPic").on("fileuploaderror", function (event, data, previewId, index) {
// alert("fileuploaderror");

var errmsg=$("div.content div.shang_box div#UploadContainer div.file-preview div.file-error-message li").text();

var str=" [object Object]"; //注意有空格
var arr=errmsg.split(":");
var name=arr[arr.length-1];
if(str == name){
errmsg="上傳地址路徑配置錯誤！";
}


console.log('msg==='+errmsg);
$("#thumbnailImg1").tips({
side:2,
msg:errmsg,
bg:'#AE81FF',
time:2
});
});

$("#thumbnailPic").on("fileloaded", function (event, data, previewId, index) {
var f = document.getElementById('thumbnailPic').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('thumbnailImg1').src = src;
});



</script>