全国服务热线:4008-888-888

技术知识

html5完成多照片预览提交及点一下可拖拽控制

在做照片提交时发现1个蛮功能强大的控制,适用多张照片另外提交,能够点一下挑选照片,还可以将照片拖拽到提交框立即提交,便捷,功能强大,插口也简易,基础能够立即放到新项目里应用。

先看看他的款式:

挑选照片后:

$(function(){  
    // 原始化软件  
    $("#demo").zyUpload({  
        width            :   "650px",                 // 宽度  
        height           :   "400px",                 // 宽度  
        itemWidth        :   "120px",                 // 文档项的宽度  
        itemHeight       :   "100px",                 // 文档项的高宽比  
        url              :   "/upload/UploadAction",  // 提交文档的相对路径  
        multiple         :   true,                    // 是不是能够好几个文档提交  
        dragDrop         :   true,                    // 是不是能够拖拽提交文档  
        del              :   true,                    // 是不是能够删掉文档  
        finishDel        :   false,                   // 是不是在提交文档进行后删掉预览  
        /* 外界得到的回调函数插口 */  
        onSelect: function(files, allFiles){                    // 挑选文档的回调函数方式  
            console.info("当今挑选了下列文档:");  
            console.info(files);  
            console.info("以前没提交的文档:");  
            console.info(allFiles);  
        },  
        onDelete: function(file, surplusFiles){                     // 删掉1个文档的回调函数方式  
            console.info("当今删掉了此文档:");  
            console.info(file);  
            console.info("当今剩下的文档:");  
            console.info(surplusFiles);  
        },  
        onSuccess: function(file){                    // 文档提交取得成功的回调函数方式  
            console.info("此文档提交取得成功:");  
            console.info(file);  
        },  
        onFailure: function(file){                    // 文档提交不成功的回调函数方式  
            console.info("此文档提交不成功:");  
            console.info(file);  
        },  
        onComplete: function(responseInfo){           // 提交进行的回调函数方式  
            console.info("文档提交进行");  
            console.info(responseInfo);  
        }  
    });  
});  

立即在demo.js里改动配备,url :   "/upload/UploadAction" 放你的照片提交action,这个控制只是前台接待解决,后台管理的提交还得自身写

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服