上传多张图片imgupload
<tr>
<td class="listtitle-up">尿素箱</td>
<td>
<div class="comtainerimg upimg-div floatleft">
<input type="hidden" value="" id="photo-4" name=""/>
</div>
<div class="z_photo floatleft" >
<section class="z_file fl">
<img src="mrm/css/bigimg/a11.png" class="add-img">
<input type="file" name="file" id="file4" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp,image/PNG" multiple style="opacity: 0"/>
</section>
</div>
<a class="removelist" href="javascript:">
<i class="fa fa-trash-o" ></i>
<a>
</td>
</tr> <aside class="mask works-mask" style="display: none;">
<div class="mask-content">
<h3>删除图片</h3>
<p class="del-p">您确定要删除吗？</p>
<p class="check-p"><span class="del-com wsdel-ok"><i class="glyphicon glyphicon-ok"></i> 确定</span><span class="wsdel-no"><i class="glyphicon glyphicon-remove"></i>取消</span></p>
</div>
</aside>
$(function(){
var delParent;
var defaults = {
fileType : ["jpg","png","bmp","jpeg","PNG"], // 上传文件的类型
fileSize : 1024 * 1024 * 10 // 上传文件的大小 10M
};
/*点击图片的文本框*/
var j=0;
$(document).on('change','.file',function(){
var imgsrc= "";//声明图片的路径
var creatarry=new Array();
// $(".file").change(function(){alert("1");
var idFile = $(this).attr("id");
var file = document.getElementById(idFile);
var imgContainer = $(this).parents(".z_photo").siblings('.comtainerimg'); //存放图片的父亲元素
var fileList = file.files; //获取的图片文件
console.log(fileList+"======filelist=====");
var input = $(this).parent();//文本框的父亲元素
var imgArr = [];
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
// 声明新input
var newinput="<input type='file' name='file' id='newfile' class='file' value='' accept='image/jpg,image/jpeg,image/png,image/bmp,image/PNG' multiple style='opacity: 0'/>";
// if(fileList.length > 5 || totalNum > 5 ){
// alert("上传图片数目不可以超过5个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
// }
// else if(numUp < 5){
fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
var imgUrl = window.URL.createObjectURL(fileList[i]);
imgArr.push(imgUrl);
var $section = $("<section class='up-section fl loading'>");
imgContainer.append($section);
var $span = $("<span class='up-span'>");
$span.html(fileList[i].name).appendTo($section);
var $img0 = $("<img class='close-upimg' src='/hvdm/r/mrm/css/bigimg/a7.png'>").on("click",function(event){
event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
});
$img0.appendTo($section);
var $a = $("<a rel='lightbox-group'>");
$a.attr("href",imgArr[i]);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
$img.appendTo($a);
$a.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
$input.appendTo($section);
var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
$input2.appendTo($section);
// imgsrc+=imgArr[i]+",";//循环 累加href值
imgsrc+=imgArr[i];//循环 累加href值
creatarry.push(imgArr[i]);//将href各个 值存入到数组中
}
var srcval=imgContainer.find("section").siblings('input').val(); //第二次点击添加图片 之前的href链接地址；
if(srcval){//如果有地址 说明是第二次点击效果；
var oldsrc=srcval.split(";"); //将之前存入的 链接 转为数组
oldsrc.concat(creatarry); //并拼接 现在上传点击的图片链接
imgContainer.find("section").siblings('input').val(oldsrc.concat(creatarry).join(';'));//并赋给 input值
setTimeout(function(){ //执行加载效果，结束事件
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
// console.log($('.file').val());$('.file').val('');
$(this).hide();
console.log($(this).val());
$(this).parents('.z_file').append("<input type='file' name='file' id='newfile" + j + "' class='file' value='' accept='image/jpg,image/jpeg,image/png,image/bmp,image/PNG' multiple style='opacity: 0'/>");
j=j+1;
return false;
}
imgContainer.find("section").siblings('input').val(creatarry.join(';')+";"+imgContainer.parents("tr").find(".listtitle-up").html());//给隐藏域追加所有href值
if(srcval){alert("0");
var newvalue=imgContainer.find("section").siblings('input').val(creatarry.join(';')+";"+imgContainer.parents("tr").find(".listtitle-up").html());
alert("1");
imgContainer.find("section").siblings('input').val(newvalue);
}
// }
setTimeout(function(){
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
numUp = imgContainer.find(".up-section").length;
if(numUp >= 5){
// $(this).parent().hide();
}
//input内容清空
// $(this).val("");
//限制字符个数
$(".up-span").each(function() {
var maxwidth = 6;
if ($(this).text().length > maxwidth) {
$(this).text($(this).text().substring(0, maxwidth));
$(this).html($(this).html() + '...');
}
});
$(this).hide();
console.log($(this).val());
$(this).parents('.z_file').append("<input type='file' name='file' id='newfile" + j + "' class='file' value='' accept='image/jpg,image/jpeg,image/png,image/bmp,image/PNG' multiple style='opacity: 0'/>");
j=j+1;
console.log(j);
});
$(".z_photo").delegate(".close-upimg","click",function(){
$(".works-mask").show();
delParent = $(this).parent();
imgsrcs=$(this).parents("section").siblings('input');
});
$(".wsdel-ok").click(function(){
$(".works-mask").hide();
var numUp = delParent.siblings().length;
// var srcall=imgsrcs.val();
if(numUp < 6){
delParent.parent().find(".z_file").show();
}
var srcinput=delParent.siblings('input');//声明 被删除的 行中的隐藏input
var srcall=delParent.siblings('input').val();//声明input的值
var srcallarry=srcall.split(';');//将input的val值转为数组
var thissrc=delParent.find('a').attr('href'); //查找要删除的图片链接值
delParent.remove(); //移除 section 标签域
// var nullarry=new Array();//声明空 数组
for(var j=0;j<=srcallarry.length;j++){//循环 input中 的val值 ，除需要删除的链接值
if(srcallarry[j]==thissrc){
srcallarry.splice(j,1);
j=j-1;
// nullarry.push(srcallarry[j]);//将除删除连接的值存入空数组
}
}
srcinput.val(srcallarry.join(';'));//新数组的值 赋给input
if(numUp==1){
srcinput.val('');
}
});
$(".wsdel-no").click(function(){
$(".works-mask").hide();
});
function validateUp(files){
var arrFiles = [];//替换的文件数组
for(var i = 0, file; file = files[i]; i++){
//获取文件上传的后缀名
var newStr = file.name.split("").reverse().join("");
if(newStr.split(".")[0] != null){
var type = newStr.split(".")[0].split("").reverse().join("");
console.log(type+"===type===");
if(jQuery.inArray(type, defaults.fileType) > -1){
// 类型符合，可以上传
if (file.size >= defaults.fileSize) {
alert(file.size);
alert('您这个"'+ file.name +'"文件大小过大');
} else {
// 在这里需要判断当前所有文件中
arrFiles.push(file);
}
}else{
alert('您这个"'+ file.name +'"上传类型不符合');
}
}else{
alert('您这个"'+ file.name +'"没有类型, 无法识别');
}
}
return arrFiles;
}
})
上传多张图片imgupload的更多相关文章
- iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样
// 上传多张图片 - (void)send { // 设置初始记录量为0 self.count = 0; self.upcount = 0; // 设置初始值为NO self.isUploadPic ...
- php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...
- 微信JSSDK上传多张图片
之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...
- 整理几个js上传多张图片的效果
一.普通的上传图片,张数不限制 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"&g ...
- 如何在IPFS里面上传一张图片
之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件 下载地址:https://dist.ipfs.io/#go-ip ...
- Ajax+PHP实现异步上传多张图片
Ajax+PHP实现异步上传多张图片 HTML代码 <!-- date: 2018-04-27 13:46:55 author: 王召波 descride: 多张图片上传 --> < ...
- 1) 上传多张图片时 ,对 $_FILES 的处理. upload ; 2)fileinput 上传多张图片. 3) 修改,删除的时候删除原来的资源,图片 update, delete , 删除 4)生成器中两个字段上传图片的时候,要修改生成器生成的代码
1上传多张图片, 要对 $_FILES进行 重新处理. //添加 public function addCourseAlbumAction() { $CourseAlbumModel = new Co ...
- Okhttp3上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
- POST请求上传多张图片并携带参数
POST请求上传多张图片并携带参数 在iOS中,用POST请求携带参数上传图片是非常恶心的事情,HTTPBody部分完全需要我们自己来配置,这个HTTPBody分为3个部分,头部分可以携带参数,中间部 ...
随机推荐
- 敏捷项目-依赖项拖动change
1. 2.类方法插入数据.
- TCP BBR - 一键开启脚本
这是秋水逸冰提供的TCP BBR一键开启脚本,脚本详细说明地址: https://teddysun.com/489.html 按照说明操作就可以了,注意问题:这个脚本获取有的时候可能有问题,如果提示脚 ...
- 《Python绝技：运用Python成为顶级黑客》 用Python进行渗透测试
1.编写一个端口扫描器 TCP全连接扫描.抓取应用的Banner #!/usr/bin/python #coding=utf-8 import optparse import socket from ...
- 蒲公英(bzoj2724)(分块+区间众数)
Input Output Sample Input 6 3 1 2 3 2 1 2 1 5 3 6 1 5 Sample Output 1 2 1 HINT \(n <= 40000\),$ m ...
- LOJ#2052. 「HNOI2016」矿区（平面图转对偶图）
题面 传送门 题解 总算会平面图转对偶图了-- 首先我们把无向边拆成两条单向边,这样的话每条边都属于一个面.然后把以每一个点为起点的边按极角排序,那么对于一条边\((u,v)\),我们在所有以\(v\ ...
- asp.net mvc 5 初体验
参考:http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started 1. 新建 ASP.Net Web 应用程序,跟着向导一路 ...
- Android逆向-Android基础逆向（5）
本文作者:i春秋作家——HAI_ 0×00 前言 不知所以然,请看 Android逆向-Android基础逆向(1)Android逆向-Android基础逆向(2)Android逆向-Android基 ...
- java 中什么是aop
AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入 ...
- grub覆盖mbr引导系统
grub覆盖mbr引导系统 0.个人PC,WIN 7 + Kali,easybcd 不起作用,需要制作 kali 安装盘 PS:推荐使用 universal usb installer 制作. 方案一 ...
- 《JAVA与模式》之装饰模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述装饰(Decorator)模式的: 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替 ...