今天闲着没事,把之前的多张图片上传代码整理了下。

页面主要代码:

 <div class="upBox upBox2">
<div class="d1">
<a class="redA1 rightA" href="javascript:choosePhotos();" id="continue_add_button" style="display:none;">继续添加</a>
</div>
<div class="d2" id="add_photo_button">
<a href="javascript:choosePhotos();" class="blueA1">从电脑上传照片</a>
<p class="p1">注:支持JPG格式多张上传,按住Ctrl或Shift选择图片,一次最多可上传150张照片</p>
</div>
<input type="file" id="upload" accept="image/jpeg" multiple="multiple" style="display:none;" />
<canvas id="myCanvas" style="display:none;"></canvas>
<div class="d3">
<ul class="ul1 clearfix" id="local_upload_div"> </ul>
</div>
</div>

js部分主要代码,其实不用html5的画布也行,不过貌似用画布页面加载比直接预览图较快。

具体上传代码没写,和单张上传是一样的,需要的朋友可以去我的另一篇写单张上传的博客里看一下:JavaScript实现单张图片上传功能

 //准备上传的模板
var mb_upload = "<li id=\"up_li_INDEX\">"+
"<div>"+
"<div class=\"imgD\">" +
"<img id=\"up_img_INDEX\" src=\"/img/upload/morenI.png\" >"+
"</div>" +
"<p class=\"jdP\" id=\"up_p_INDEX\">" +
"<img class=\"i1\" src=\"/img/upload/loading.gif\">"+
"准备上传"+
"</p>" +
"</div>"+
"</li>"; $(function(){
//文件域改变时触发
$('#upload').change(function (evt) {
fileChange(evt);
});
}); //触发文件域
function choosePhotos(){
$("#upload").click();
} //文件域改变时触发
function fileChange(evt){
var files = evt.target.files;
if(files.length == 0)return;
//上传页面已有照片数量
var up_page_num = $("#local_upload_div li").length; $("#add_photo_button").hide();
$("#continue_add_button").show(); layer.msg('照片加载中', {icon: 16}); for(var m=0; m<files.length; m++){
var f = files[m];
console.log("type="+f.type+" name="+f.name+" length="+f.size);
addPhoto(m+1+up_page_num);
}
getImagesInfo(files,0,up_page_num); } //页面添加等待上传的预显示图片
function addPhoto(i){
var segment = mb_upload;
segment = segment.replace(/INDEX/g,i);
$("#local_upload_div").append(segment);
} //获取到照片信息并在页面添加预览图
var getImagesInfo = function(files,a,up_page_num){ if(files.length > a){ usUploading = true; var f = files[a]; ///var type = f.type;
//获取容器
var c = document.getElementById("myCanvas");
//获取画布对象
var cxt = c.getContext("2d"); var reader = new FileReader(); var name = f.name;//完整照片名称,带格式 //异步方法,文件读取完毕才执行
reader.onload = function(e){
//图片的读取结果
var dataImg = e.target.result;
var img = new Image();
//异步方法
img.onload = function(){
var ratio = img.width/img.height;
var h,w;
//等比例压缩宽和高
if(ratio>1){
w = 110;
h = w*img.height/img.width;
}else{
h = 110;
w = h*img.width/img.height;
}
//容器设置宽和高
c.width = w;
c.height = h;
//清空容器
cxt.clearRect(0, 0, w, h);
//开始作画
cxt.drawImage(img,0,0,w,h);
//获取容器中画的url
var compressed = c.toDataURL("image/jpeg"); //将预览图插入上传页面
$("#up_img_"+(a+1+up_page_num)).attr("src",compressed);
$("#up_img_"+(a+1+up_page_num)).show("slow"); syncUpload(files,dataImg,a,name,up_page_num);
};
//将图片的读取结果赋到img对象的src属性上
img.src = dataImg;
};
//将图片读取为URL数据:base64编码
reader.readAsDataURL(f);
}
} //原图上传
var syncUpload = function(files,imgStr,index,name,up_page_num){ sleep(1000);//延时1s,模拟ajax,O(∩_∩)O哈哈~ //这里就是和单张上传逻辑一样了,只不过在上传成功后再次调用上面的方法,具体上传的方法就不写了
$("#up_p_"+(index+1+up_page_num)).html("<img class=\"i1\" src=\"/img/upload/duihao2.png\">"+
"上传成功"+
"<a href=\"javascript:void(0);\" class=\"right\"><img class=\"i2\" src=\"/img/upload/shanI.gif\"></a>"); getImagesInfo(files,++index,up_page_num); }; //设置延时函数
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)return;
}
}

看看基本效果O(∩_∩)O:

JavaScript实现多张图片上传功能的更多相关文章

  1. JavaScript实现单张图片上传功能

    前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...

  2. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  3. 用原生JS实现多张图片上传及预览功能(兼容IE8)

    最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...

  4. OneThink实现多图片批量上传功能

    OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThi ...

  5. PHP语言学习之php做图片上传功能

    本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...

  6. ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能

    tinymce 插件不提供免费的本地图片上传功能,所以自己将uploadify这个上传插件整合到tinymce,实现本地上传,还用到了jquery.ui插件,先展示全部的代码 @model TinyM ...

  7. PHP 文件上传功能

    <?php /** * TestGuest Version1.0 * ================================================ * Web:2955089 ...

  8. 使用ThinkPHP+Uploadify实现图片上传功能

    首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" ...

  9. Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

随机推荐

  1. Linux命令:pwd

    打印当前目录的完全路径. -L 打印路径包含符合路径 -P 打印路径不含符合路径. -LP,可能打印的不同,取决于你对进入当前目录的方式是通过符号链接进入,还是物理目录进入.如果是符号链接进入,则-L ...

  2. centos7下 nginx配置upstream 不能直接代理到本机tomcat的解决

    Nginx代理本地tomcat时404. upstream是直接配置server localhost:10000 的.单独访问tomcat是可以的. 查看/var/log/nginx/error.lo ...

  3. 浅谈MyBatisGenerator的使用

    目录 1.概述 2.依赖 3.Maven插件配置 4.配置文件说明 5.运行 6.总结 1.概述 日常中使用MyBatis最为麻烦的就是编写Mapper文件了, 如果数据库增加一张表, 这时通常会复制 ...

  4. metrics+spring+influxdb整合

    1.在maven项目的pom.xml引入metrics-spring和metrics-influxdb两个jar包 <dependency> <groupId>com.ryan ...

  5. 34 【kubernetes】安装手册

    全文参考了两篇中文文档: 1,https://www.cnblogs.com/RainingNight/p/using-kubeadm-to-create-a-cluster.html 2,http: ...

  6. 515. Find Largest Value in Each Tree Row查找一行中的最大值

    [抄题]: You need to find the largest value in each row of a binary tree. Example: Input: 1 / \ 3 2 / \ ...

  7. [leetcode]55. Jump Game青蛙跳(能否跳到终点)

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  8. 事件委托在ios下面失效

    $(document).on("click","目标class",function(){ //安卓下点击可以,ios下面失效 }) 百度了下说是H5新定义的, ...

  9. centos 7 一些命令

    su 切换到管理员账户cd 'wo shi mu lu'ls 查看 当前目录或者文件tar -xvzf pip-10.0.1.tar.gz 解压 文件systemctl restart network ...

  10. Nodejs初识随笔

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 单线程运行,不 ...