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

<!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. linux命令读取文件中特定行

    1.如果你只想看文件的前5行,可以使用head命令, 如: head -5 /etc/passwd 2.如果你想查看文件的后10行,可以使用tail命令, 如: tail -10 /etc/passw ...

  2. Eclipse 配置运行Spark

    本文主要记录Spark 在 Eclipse中报 找不到主类的问题.在新建Spark工程,然后add external jars 选择 spark-assembly-1.4.0-hadoop2.6.0. ...

  3. C# 关键字--virtual(转)

    C# 关键字--virtual 一.   virtual 关键字用于修饰方法.属性.索引器或事件声明,并使它们可以在派生类中被重写.虚拟成员的实现可由派生类中的重写成员更改,而非虚拟成员是无法由派生类 ...

  4. vs调试dll工程

    dll本身是没法运行的,必须在其它工程调用dll时候才会运行. 所以,调试dll首先要将调用dll的工程和dll工程联系起来. 解决方案中添加dll工程: 现在dll 和 应用程序两个工程就都在一个解 ...

  5. SQL Server中计算表达式的和

    项目使用的是SQL Server数据库,需要做一个审核规则,字段A中表达式的值和字段B中的值,做比较: 需求本身很简单,但是表达式中存在很多非法字符(非法全角,运算符,汉字--) eg:1.1.1*2 ...

  6. 洛谷 [P1963] [NOI2009] 变换序列

    这是一道二分图匹配的题 先%dalao博客 建图并没有什么难的,但是关键在于如何使字典序最小. 一个很显然的想法是先求出一个完美匹配,然后从x集合的第一个元素开始,如果该元素匹配的较小的一个,那么继续 ...

  7. bzoj 3509: [CodeChef] COUNTARI] [分块 生成函数]

    3509: [CodeChef] COUNTARI 题意:统计满足\(i<j<k, 2*a[j] = a[i] + a[k]\)的个数 \(2*a[j]\)不太好处理,暴力fft不如直接暴 ...

  8. BZOJ 4710: [Jsoi2011]分特产 [容斥原理]

    4710: [Jsoi2011]分特产 题意:m种物品分给n个同学,每个同学至少有一个物品,求方案数 对于每种物品是独立的,就是分成n组可以为空,然后可以用乘法原理合起来 容斥容斥 \[ 每个同学至少 ...

  9. Python tutorial阅读之函数的定义与使用

    函数的定义 Python 使用关键字def定义函数,格式与C语言类似,但是没有返回类型,参数也不需要设置类型. def add(a, b): """这是函数的文档字符串& ...

  10. 实时滚动图表绘制方法: LightningChart教程 + 源码下载

    LightningChart图形控件彻底发挥了GPU加速和性能优化的最大效应,能够实时呈现超过10亿数据点的庞大数据,为大家提供先进与快速的图表库.这里的实时图实现的比较简单,大家先试一下这个效果,熟 ...