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

今天博主给大家分享一个免插件多图上传的代码,通过html5将本地图片上传服务器并实现上传之前的图片预览。博主只写前端代码,后台代码自己研究哈。 HTML5是个好东西,其中之一就是支持多图片上传,其二支持ajax上传,其三支持上传之前图片的预览,其四支持图片拖拽上传,纯粹利用file控件实现,JS代码寥寥,想不让人称赞都难啊!
1.html代码
<a href="javascript:;" class="file-img">晒图片<input type="file" id="file_input" name="fileselect[]" multiple/></a> 注意: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<this.files.length;i++){ if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){  //判断上传文件格式 return alert("上传的图片格式不正确,请重新选择") } var reader = new FileReader(); reader.readAsDataURL(this.files[i]); console.log(this.files[i]) reader.onload = function(e){ result = ('<img src="'+this.result+'" class='img-thumbnail' onclick="deleImg(this)"/> '); $(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; } 版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创 转载请注明:出处来自田珊珊个人博客 » 干货-基于html5的本地多图上传并可在线预览
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注
  • 朱绪博客说道:
    请问博主用的是wordpress程序吗
  • 套图网说道:
    阅读博客获得的进步不亚于阅读一本书。
  • 博客不少,这里独好! 丁酉年(鸡)八月廿五 2017-10-14
  • 尚吾康网说道:
    博客不错,大爱哦!
  • U乐娱乐注册