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

今天博主给大家分享一个免插件多图上传的代码，通过html5将本地图片上传服务器并实现上传之前的图片预览。博主只写前端代码，后台代码自己研究哈。

HTML5是个好东西，其中之一就是支持多图片上传，其二支持ajax上传，其三支持上传之前图片的预览，其四支持图片拖拽上传，纯粹利用file控件实现，JS代码寥寥，想不让人称赞都难啊！

1.html代码

晒图片

注意：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

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 = (' ');

$(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在线预览附件,干货-基于html5的本地多图上传并可在线预览相关推荐

HTML5 原生API input file 来实现多图上传，并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
vue.js 多图上传，并可预览
<!DOCTYPE html> <html> <head><title>vue.js 简单多图上传图片</title><meta ht ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
利用钉钉云盘实现业务系统需要的附件上传、下载和预览
本文主要记录自己在工作学习中遇到的坑和解决思路,仅供大家参考目录前言一.钉盘是什么? 二.为什么要使用钉盘? 三.JSAPI鉴权 1.鉴权的时机 2.鉴权的时效 3.鉴权的代码 3.1.获取ac ...
山东大学项目实训（十七）—— 微信小程序附件上传、下载、预览、删除
目录附件相关功能再实现附件业务功能介绍设计步骤我的上报查看事件详情 (补充) 附件相关功能再实现下图为笔者之前所写的博客关于实现的附件上传,但是没有下载.预览和删除.正因为没有下载.预览和删 ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
上传图片，多图上传，预览功能，js原生无依赖
最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...
文件上传，下载，预览，删除（File），分页接口
文件上传,下载,预览,删除(File) 1.公共参数方法 1.1公共返回类型定义 1.2 分页接口 1.3公共实体类 1.4 公共的 mapper.java/xml(都放在一起) 1.4.1 File ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...

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

html5在线预览附件,干货-基于html5的本地多图上传并可在线预览相关推荐

最新文章

热门文章