免插件多图上传的代码是通过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 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。