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

<!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. IIS6/7 配置问题

    IIS7 / IIS6 HttpMoudles 在web.config 中不同的配置 原创 2011年04月25日 08:44:00 标签: iis / server 4357 昨天把我们写的程序布署 ...

  2. Tensorflow ActiveFunction激活函数解析

    Active Function 激活函数 原创文章,请勿转载哦~!! 觉得有用的话,欢迎一起讨论相互学习~Follow Me Tensorflow提供了多种激活函数,在CNN中,人们主要是用tf.nn ...

  3. jQuery应用操作之---复选框

    1.示例1: <form> 你最爱好的运动是? <input type="checkbox" id="CheckedAll"/>全选&l ...

  4. 利用多进程获取猫眼电影top100

    猫眼电影top100 是数据是在加载网页时直接就已经加载了的,所以可以通过requests.get()方法去获取这个url的数据,能过对得到的数据进行分析从而获得top100的数据, 把获取的数据存入 ...

  5. HTML基础知识概括

    1.html的概念 HTML是用来描述网页的一种语言. HTML指的是超文本标记语言(HyperText Markup Language) HTML不是一种编程语言,而是一种标记语言(markup l ...

  6. python之闭包与装饰器

    python闭包与装饰器 闭包 在函数内部定义的函数包含对外部的作用域,而不是全局作用域名字的引用,这样的函数叫做闭包函数. 示例: #-------------------------------- ...

  7. Springboot security cas源码陶冶-ExceptionTranslationFilter

    拦截关键的两个异常,对异常进行处理.主要应用异常则跳转至cas服务端登录页面 ExceptionTranslationFilter#doFilter-逻辑入口 具体操作逻辑如下 public void ...

  8. BZOJ 2115: [Wc2011] Xor [高斯消元XOR 线性基 图]

    啦啦啦 题意: N 个点M条边的边带权的无向图,求1到n一条XOR和最大的路径 感觉把学的东西都用上了.... 1到n的所有路径可以由一条1到n的简单路径异或上任意个简单环得到 证明: 如果环与路径有 ...

  9. POJ 1830 开关问题 [高斯消元XOR]

    和上两题一样 Input 输入第一行有一个数K,表示以下有K组测试数据. 每组测试数据的格式如下: 第一行 一个数N(0 < N < 29) 第二行 N个0或者1的数,表示开始时N个开关状 ...

  10. 数据分析之pandas教程-----概念篇

    目录 1  pandas基本概念 1.1  pandas数据结构剖析 1.1.1  Series 1.1.2  DataFrame 1.1.3  索引 1.1.4  pandas基本操作 1.1.4. ...