那时写手给我们撷取两个免应用程序多图上载的标识符,透过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); } } } ;i++){>
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; }