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

墨色明月

修改于 2018-06-05 11:09:58

97100

代码可运行

文章被收录于专栏：云端架构云端架构

运行总次数：0

代码可运行

免插件多图上传的代码是通过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;
}

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html5