专栏首页云端架构【云端架构】基于html5的本地多图上传并可在线预览

【云端架构】基于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;
}

原文链接:http://www.qybolg.cc/?post=16

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【云端架构】前端jQuery鼠标事件精选

    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的...

    墨色明月
  • 【云端架构】弹性网卡如何与云服务器绑定

    本来看ENI文档没发现什么问题,考虑到社区小伙伴们部分刚上云还是新手。文档写的有点深度就看不懂了,所以更一篇文章写官方文档中没出现的实践操作部分。

    墨色明月
  • 【云端架构】前端必备常用HTML标签

    注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。

    墨色明月
  • 【前端攻略--HTML/CSS】边框、文字效果与字体图标实例介绍

    字体:实际上是长得像图标的字体,占用的空间小,消耗的带宽小,能够更快的显示页面。字体是矢量的,所以不会失真,可以按照字体一样设置字体颜色和大小。

    小Gy
  • webuploader java版本

    网上一些webuploader上传的资料,有php版和java版本的,做了一下整合,现分享以下成果,可以讨论,不喜勿碰。说一下过程。

    用户5640963
  • Android界面启动流程(三)

    aruba
  • 1.2.2 计算机硬件的基本组成

    1)计算机硬件系统由运算器、控制器、存储器、输入设备、输出设备五大部分组成的; 2)指令和数据以同等的地位存于存储器中,并可按地址寻访。

    week
  • 用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)

    以上这篇用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • perspective设置在哪里呢详解

    用户7873631
  • 我对python中的super()机制的一点理解

    在类的继承里,super()解决了子类调用父类方法的一些问题。一般说来,在子类中调用父类的方法有两种,最简单的是将对象调用转换为类调用。

    树枝990

扫码关注云+社区

领取腾讯云代金券