小知识:干货-基于html5的本地多图上传并可在线预览

那时写手给我们撷取两个免应用程序多图上载的标识符,透过html5将邻近地区相片上载伺服器并同时实现上载以后的相片自动更新。写手只写后端标识符,前台标识符他们科学研究哈。

HTML5是个好小东西,当中众所周知是全力支持多相片上载,其三全力支持ajax上载,其三全力支持上载以后相片的自动更新,其三全力支持相片拖曳上载,单纯借助file命令行同时实现,JS标识符寥寥无几,想不许人赞扬都难啊!1.html标识符

晒相片
特别注意:multiple特性,明确规定输出表头可优先选择数个值,也是同时实现此机能的必写部份。

2.js标识符

//上载相片处置
 var input = document.getElementById("file_input");
 var result,div;
 if(typeof FileReader===undefined){
 result.innerHTML = "对不起,你的应用程序不全力支持 FileReader";
 input.setAttribute(disabled,disabled);
 }else{
 input.addEventListener(change,readFile,false);
 }
 //handler
 function readFile(){
 div = document.createElement(div);
 $("#file-box").append(div);
 for(var i=0;i );
 $(div).prepend(result);

}
 }

}

3.修改上载相片按钮的css样式

.file-img {
    position: relative;
    display: inline-block;
    background-color: #93B4C6;
    border: 1px solid #93B4C6;
    padding: 4px 12px;
    overflow: hidden;
    color: #FFF;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    margin-top: 5px;
}
.file-img input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}
.file-img:hover {
    color: #FFF;
}

建站知识

猿站网:React Router页面传值的三种方法

2022-5-22 1:02:00

建站知识

小知识:【前端】jq获取当前url并用split截取所需id值

2022-5-22 22:38:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索