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

<!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. Java NIO 之 Socket Channel

    在Java NIO中用Channel来对程序与进行I/O操作主体的连接关系进行抽象,这些IO主体包括如文件.Socket或其他设备.简而言之,指代了一种与IO操作对象间的连接关系. 按照Channel ...

  2. mysql主从延迟高的原因

    1.1.1故障1:从库数据与主库冲突 1 2 3 4 5 6 show slave status; 报错:且show slave status\G Slave_I/O_Running:Yes Slav ...

  3. 解决AspNet Zero Core 5.0.1无法运行的问题

    最近在研究AspNet Zero Core 5.0.1时发现VS点击调试后就自动退出了,从ABP QQ群里得知作者加入了licensecode校验.经过一个周左右断断续续的折腾,算是破解了吧.原本想把 ...

  4. 2017年总结的前端文章——border属性的多方位应用和实现自适应三角形

    border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等 ...

  5. 分布式唯一id：snowflake算法思考

    匠心零度 转载请注明原创出处,谢谢! 缘起 为什么会突然谈到分布式唯一id呢?原因是最近在准备使用RocketMQ,看看官网介绍: 一句话,消息可能会重复,所以消费端需要做幂等.为什么消息会重复后续R ...

  6. 关于metaclass，我原以为我是懂的

    关于Python2.x中metaclass这一黑科技,我原以为我是懂的,只有当被打脸的时候,我才认识到自己too young too simple sometimes native. 为什么之前我认为 ...

  7. 探索从 MVC 到 MVVM + Flux 架构模式的转变

    本文首发于 my blog 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用,本文会通过一个小 demo 来讲述为什么会引人数据状态库. 从 MVC 到 MV ...

  8. FTP工具

    上传本地资源到FTP服务器,可以使用LeapFTP软件.左侧为本地资源,右侧为FTP资源.输入用户名,密码,连接后直接拖动即可. 为本地资源建立FTP,可以方便进行设备升级.文件传输等.

  9. JDBC学习笔记(三)

    获取数据库的元信息metadata,里面有数据库特性的描述信息,如是否支持事务,是否支持批处理等. Connection conn = DriverManager.getConnection(url, ...

  10. k短路模板 POJ2449

    采用A*算法的k短路模板 #include <iostream> #include <cstdio> #include <cstring> #include < ...