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

js的回调函数 一些例子的更多相关文章

  1. js 回调函数小例子

    js 回调函数小例子 <script> //将函数作为另一个函数的参数 function test1(){ alert("我是test1"); } function t ...

  2. 关于js的回调函数的一点看法

    算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...

  3. js的回调函数详解

    本文主要介绍了个人对于javascript中回调函数的理解和使用方法及示例,需要的朋友可以参考下   现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框 ...

  4. node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...

  5. js的回调函数

    介绍首先从英文介绍开始 A callback is a function that is passed as an argument to another function and is execut ...

  6. Node js 安装+回调函数+事件

    /* 从网站 https://nodejs.org/zh-cn/ 下载 这里用的 9.4.0 版本 下载完安装 安装目录是 D:\ApacheServer\node 一路默认安装 安装后打开cmd命令 ...

  7. js中回调函数(callback)的一些理解

    前言 我个人在学习Node.js相关知识时遇到了回调函数这个概念,虽然之前已经在c,c++等编程语言中用到过它,但还一直未对其机制有深入了解,这次就来好好谈一下它. 概念理解 百度对它的解释是回调函数 ...

  8. 转:Delphi 回调函数及例子

    http://anony3721.blog.163.com/blog/static/5119742010866050589/ { http://anony3721.blog.163.com/blog/ ...

  9. 没办法,还是要补一下js,回调函数(转载)

    <html> <head> <title>回调函数(callback)</title> <script language="javasc ...

随机推荐

  1. ionic ios 发布设置 header-bar高度无效

    在公司app发布过程中发现一旦改过header-bar的高度之后在ios内部或者通过ionic build browser生成的网页打开都不是正常的 通过chrome的查看工具发现自己写的样式被直接覆 ...

  2. 如何同时打开两个excel

    1. 打开一个excel1 2. 不要双击想要打开的excel2.右键excel应用的图标,选择excel2007. 3. 将excel2拖动到2所打开的新建excel中. 4. over.

  3. 写个c++小例子

    class Rational{ public: const Rational operator*( const Rational& rhs); Rational(int num); priva ...

  4. Linux 笔记

    权限: rwx rwx rwx 以4 2 1数字表示 rwx x 在目录当中是与『能否进入该目录』有关 w 可以让使用者删除.更新.新建文件或目录 通过  "su - vbird" ...

  5. API接口:分页

    // 查询满足要求的总记录数 $count = M("back")->where($back_map)->count(); $pagecount = ceil($cou ...

  6. AutofacContainer

    /// <summary> /// Autofac容器 /// </summary> public class AutofacContainer { public static ...

  7. Sql Server FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  8. fzoj1314 You are my brother

    题目描述 Little A gets to know a new friend, Little B, recently. One day, they realize that they are fam ...

  9. (zz)linux awk

    博文转载自http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html 谢谢原作者.条理很清楚,由浅入深.敲了每一行命令,正确无误. ...

  10. 微信安卓版下载 Android微信各版本列表

    前面ytkah弄了一个iso微信各版本列表,现在就来整一个微信 for Android各版本列表,方便大伙下载.每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.资源收集于 ...