整理几个js上传多张图片的效果
一、普通的上传图片,张数不限制
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>上传多张图片</title>
<style type="text/css">
.img-div{
border: 1px solid #ddd;
border-radius: 100%;
float: left;
line-height: 1;
margin-left: 5px;
overflow: hidden;
} </style>
</head>
<body> <script type="text/javascript">
//选择图片,马上预览
function xmTanUploadImg(obj) { var fl=obj.files.length;
for(var i=0;i<fl;i++){
var file=obj.files[i];
var reader = new FileReader(); //读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
console.log("成功读取...."); var imgstr='<img style="width:100px;height:100px;" src="'+e.target.result+'"/>';
var oimgbox=document.getElementById("imgboxid");
var ndiv=document.createElement("div"); ndiv.innerHTML=imgstr;
ndiv.className="img-div";
oimgbox.appendChild(ndiv); }
reader.readAsDataURL(file);
}
}
</script>
<form id="form">
<input type="file" id="xdaTanFileImg" multiple="multiple" name="fileAttach" onchange="xmTanUploadImg(this)"/>
<div class="img-box" id="imgboxid"></div>
<div id="xmTanDiv"></div><br/>
<div id="errordiv" style="margin-top:15px;width:100%;text-align:center;">
</div>
</form>
</body>
二、限制图片张数、图片大小、图片宽高、删除图片
整理中...
整理几个js上传多张图片的效果的更多相关文章
- 微信js sdk上传多张图片
微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...
- java jfinal + ajaxfileupload.js 上传
功能上传 需求:同时上传多张图片 前端:jquery.ajaxfileupload.js 后端:jfinal upload.htm <html> <body> <div ...
- 如何在IPFS里面上传一张图片
之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件 下载地址:https://dist.ipfs.io/#go-ip ...
- Ajax+PHP实现异步上传多张图片
Ajax+PHP实现异步上传多张图片 HTML代码 <!-- date: 2018-04-27 13:46:55 author: 王召波 descride: 多张图片上传 --> < ...
- thinkphp3.2+cropper上传多张图片剪切图片
实现效果截图 点加号可以继续上传第二张图片 代码部<--引入cropper相关文件--> <link rel="stylesheet" href="/h ...
- javascript上传多张图片并预览
直接上代码 html代码 <div> <label>封面</label> <input type="file" id="cove ...
- 微信小程序上传多张图片,及php后台处理
微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...
- 使用ajaxfileupload.js上传文件
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
- iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样
// 上传多张图片 - (void)send { // 设置初始记录量为0 self.count = 0; self.upcount = 0; // 设置初始值为NO self.isUploadPic ...
随机推荐
- Tomcat8远程访问manager,host-manager被拒绝403
Tomcat部署在服务器之后在服务器本地访问manager和host-manager成功(即127.0.0.1:8080或者localhost:8080),但使用测试主机访问tomcat的manage ...
- Python self学习
最开始学习Python时,用的IDE是IDEL,看的教程是<简明Python教程>,强烈推荐一下,讲得还是很不错的,适合新手学习 http://www.kuqin.com/abyteofp ...
- linux 基础信息查询
Linux下如何查看版本信息 Linux下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然. 1.# uname -a (Linux查看 ...
- SSH 面试题集锦
1. BeanFactory的作用是什么? [中] BeanFactory是配置.创建.管理bean的容器,有时候也称为bean上下文.Bean与bean的依赖关系,也是由BeanFactory ...
- BZOJ 3944: Sum [杜教筛]
3944: Sum 贴模板 总结见学习笔记(现在还没写23333) #include <iostream> #include <cstdio> #include <cst ...
- getHibernateTemplate() VS getSession()
如题所示,对于这个问题,官网文档已给出答案,详见: /** * Obtain a Hibernate Session, either from the current transaction or * ...
- 小甲鱼OD学习第2讲
这次我们的任务是让我们输入任意用户名密码判断正确 我们输入fishc和111111,显示错误 我们猜测这是用GetDlgItemTextW来收集账号密码的输入值 我们找到了两个函数,给这两个函数都下断 ...
- C#实现航班查询及预订
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- WPF 使用DMSkin for WPF 快速搭建漂亮的WPF程序
DMSkin-for-WPF是一个基于WPF的.Net WPF开源界面库,实现了无边框的WPF开发方案,内置部分控件模板. 你可以参照模板自行修改完善.(以下简称DFW). 核心 DFW实现了比较完美 ...
- Maven项目中的配置文件找不到以及打包问题
我们在使用maven开发项目的时候,创建model的时候会自动创建一个resource目录:这个目录是用来放配置文件的,我们把配置文件放在这个目录中项目打包才会将配置文件打包进去. 有的时候我们会把配 ...