这边用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>