一、普通的上传图片,张数不限制

<!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上传多张图片的效果的更多相关文章

  1. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  2. java jfinal + ajaxfileupload.js 上传

    功能上传 需求:同时上传多张图片 前端:jquery.ajaxfileupload.js 后端:jfinal upload.htm <html> <body> <div ...

  3. 如何在IPFS里面上传一张图片

    之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件 下载地址:https://dist.ipfs.io/#go-ip ...

  4. Ajax+PHP实现异步上传多张图片

    Ajax+PHP实现异步上传多张图片 HTML代码 <!-- date: 2018-04-27 13:46:55 author: 王召波 descride: 多张图片上传 --> < ...

  5. thinkphp3.2+cropper上传多张图片剪切图片

    实现效果截图 点加号可以继续上传第二张图片 代码部<--引入cropper相关文件--> <link rel="stylesheet" href="/h ...

  6. javascript上传多张图片并预览

    直接上代码 html代码 <div> <label>封面</label> <input type="file" id="cove ...

  7. 微信小程序上传多张图片,及php后台处理

    微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...

  8. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  9. iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样

    // 上传多张图片 - (void)send { // 设置初始记录量为0 self.count = 0; self.upcount = 0; // 设置初始值为NO self.isUploadPic ...

随机推荐

  1. Tomcat8远程访问manager,host-manager被拒绝403

    Tomcat部署在服务器之后在服务器本地访问manager和host-manager成功(即127.0.0.1:8080或者localhost:8080),但使用测试主机访问tomcat的manage ...

  2. Python self学习

    最开始学习Python时,用的IDE是IDEL,看的教程是<简明Python教程>,强烈推荐一下,讲得还是很不错的,适合新手学习 http://www.kuqin.com/abyteofp ...

  3. linux 基础信息查询

    Linux下如何查看版本信息   Linux下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然.   1.# uname -a   (Linux查看 ...

  4. SSH 面试题集锦

    1.  BeanFactory的作用是什么?   [中] BeanFactory是配置.创建.管理bean的容器,有时候也称为bean上下文.Bean与bean的依赖关系,也是由BeanFactory ...

  5. BZOJ 3944: Sum [杜教筛]

    3944: Sum 贴模板 总结见学习笔记(现在还没写23333) #include <iostream> #include <cstdio> #include <cst ...

  6. getHibernateTemplate() VS getSession()

    如题所示,对于这个问题,官网文档已给出答案,详见: /** * Obtain a Hibernate Session, either from the current transaction or * ...

  7. 小甲鱼OD学习第2讲

    这次我们的任务是让我们输入任意用户名密码判断正确 我们输入fishc和111111,显示错误 我们猜测这是用GetDlgItemTextW来收集账号密码的输入值 我们找到了两个函数,给这两个函数都下断 ...

  8. C#实现航班查询及预订

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  9. WPF 使用DMSkin for WPF 快速搭建漂亮的WPF程序

    DMSkin-for-WPF是一个基于WPF的.Net WPF开源界面库,实现了无边框的WPF开发方案,内置部分控件模板. 你可以参照模板自行修改完善.(以下简称DFW). 核心 DFW实现了比较完美 ...

  10. Maven项目中的配置文件找不到以及打包问题

    我们在使用maven开发项目的时候,创建model的时候会自动创建一个resource目录:这个目录是用来放配置文件的,我们把配置文件放在这个目录中项目打包才会将配置文件打包进去. 有的时候我们会把配 ...