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

<!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. React-Native 之 Modal介绍与使用

    前言 遗漏的常用组件,刚发现官方有提供,这边也来介绍一下. 如本文有错或理解偏差欢迎联系我,会尽快改正更新! 如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我. 本章涉及资源下 ...

  2. VUE环境配置步骤及相关Git Bash命令的使用

    组件式开发中,一定少不了Vue,废话少说,开始进行Vue应用前的关键性配置 备注:(为方便进行配置,提前可以安装Git bash,下载路径——https://git-scm.com/downloads ...

  3. spring重要类说明

  4. 浅谈大型web系统架构(一)

    目录 Web前端系统 负载均衡系统 数据库集群系统 缓存系统 分布式存储系统 分布式服务器管理系统 代码发布系统   动态应用,是相对于网站静态内容而言,是指以c/c++.php.Java.perl. ...

  5. Typora最常用快捷键

    插入图片:直接拖动到指定位置即可或者ctrl+shift+i 插入链接:ctrl+k 对于本地图片,我们可以直接拖进来 双回车可以回到行首

  6. 【算法】哈希表的诞生（Java）

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  7. qt程序启动画面

  8. php 生成缩略图

    $src = '4.jpg'; list($width,$height) = getimagesize($src); $im = imagecreatefromjpeg($src); $panl = ...

  9. 02-Nginx+MySQL+PHP7

    [安装Nginx] #先安装如下包 yum install gcc gcc-c++ kernel-devel yum -y install pcre-devel openssl openssl-dev ...

  10. configure: error: Bundled APR requested but not found at ./srclib/. Download and unpack the corresponding apr and apr-util packages to ./srclib/.

    Apache在2.4版本以后,编译时: # ./configure \ --prefix=/usr/local/apache2 \ --with-included-apr \ --enable-so ...