【云端架构】基于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 条评论
登录 后参与评论

相关文章

来自专栏滕先生的博客

react-native 跨平台滤镜集成

43180
来自专栏Golang语言社区

go channel 通信通道

go中最重要的一种通信通道就是channel 1.给一个 nil channel 发送数据,造成永远阻塞 2.从一个 nil channel 接收数据,造成...

31530
来自专栏Ray学习笔记

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我...

13940
来自专栏Core Net

ASP.NET Core 2.0 : 四. _Layout与_ViewStart

31040
来自专栏前端人人

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

29860
来自专栏更流畅、简洁的软件开发方式

页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以...

37270
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

390110
来自专栏向治洪

React Native的Navigator详解

前言 之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中ios/...

226100
来自专栏向治洪

React Native的Navigator详解

前言 之前,通过官方文档,我们对Navigator简介。 在React Native开发中,官方推荐使用Navigator作为导航指示器,在早期的版本中io...

218100
来自专栏DeveWork

【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

在升级了DeveMobile 主题的时候Jeff 也顺便将主题主页进行了更新,访问主页你会看到首屏的Low-Poly 背景(每次刷新都不同),这个效果就是利用了...

26080

扫码关注云+社区

领取腾讯云代金券