1. 首页
  2. 代码块

js多图上传

250 阅读 0 评论 
// $("#qy_sfz_images").val("");	
// function addorder(_this) {
// 	if($(".piclist").find("li").length<2 && $("#qy_sfz_images").length>0){
// 		msg("请选择您的身份证正反面")
// 		return false;
// 	}else{
// 		that=_this
// 		upimage(function () {
// 			return form_submit(that);
// 		})	
// 	}
// 	return false;
// }


var imgFile = []; //文件流
var imgSrc = []; //图片路径
var imgName = []; //图片名字

var input_files=$('#files_btn');//文件域
var imgBox=".piclist"; //预览区
var max_pic_count=2; //最大选择图片数
var addpic=$(".addpic"); //上传按钮
var upapi="/api/common/upload" //上传接口
var save_pic_input=$("#qy_sfz_images") //上传后保存url的文本框 
var tmp_save_pic="";//上传成功后url临时存放变量

//选择文件	
//accept= camera--照相机； camcorder--摄像机； microphone--录音 ; sel--选择视频或图像 ； selimg-选择图像
//act=sel 选择 act 相机

function click_add_files(){
	input_files.click()
}
$(document).ready(function(){
	//图片选择后数据处理
	input_files.on('change', function(e) {
			console.log("选择文件")
	    var fileList = this.files;
			if(!checkfiles(fileList)){return false;}
	    for (var i = 0; i < fileList.length; i++) {
	        var imgSrcI = getObjectURL(fileList[i]);
	        imgName.push(fileList[i].name);
	        imgSrc.push(imgSrcI);
	        imgFile.push(fileList[i]);
	    }
	    addNewContent(imgBox);
	    this.value = null; //上传相同图片
	});
});
//获得文件名的扩展名
function getExtension(name) {
      return name.substring(name.lastIndexOf(".")+1)
}

//检查文件数据
function checkfiles(fileList) {
	 var pic_count=0;
	 var tmpfileList=[];
	 for(var i=0;i<fileList.length;i++){
		 tmpfileList.push(fileList[i]);
	 }
	 
	 for(var i=0;i<imgFile.length;i++){
		 tmpfileList.push(imgFile[i]);
	 }
	//新加临时组用于检查文件数据
     console.log("tmpfileList:")
     console.log(tmpfileList)
	  for(var i=0;i<tmpfileList.length;i++){
		  if(getExtension(tmpfileList[i].name)=="jpg" || getExtension(tmpfileList[i].name)=="jpeg" || getExtension(tmpfileList[i].name)=="png" || getExtension(tmpfileList[i].name)=="gif"){
			  pic_count++;
		  }else{
			  msg("只允许上传jpg,png,gif格式的图片！")
			  return false;
		  }
	  }
	  if(pic_count>max_pic_count){
		 msg("最多只能选择"+max_pic_count+"张图片")
		 return false;
    }
		if (pic_count >= max_pic_count) { //隐藏上传按钮
			addpic.hide();
		}	 
	 	return true
}

//删除
function removeImg(index) {
    imgSrc.splice(index, 1);
    imgFile.splice(index, 1);
    imgName.splice(index, 1);
    addNewContent(imgBox);
    if(imgFile.length<max_pic_count){
    	addpic.show();
    }
}
//图片展示
function addNewContent(obj) {
     console.log(imgFile)
    $(obj).html("");
		var newbox="";
    for (var a = 0; a < imgFile.length; a++) {
    	newbox+='<li><img src="'+imgSrc[a]+'" class="img" ><span class="cha" onclick="removeImg('+a+')"></span></li>';
    }
	 $(obj).html(newbox);
}

//建立可存取到file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

function upimage(callback) {
		save_pic_input.val("");
		var done_count=0;
		var formFile=new Array();
		$.each(imgFile, function(i, file) {
			console.log("上传"+i)
			formFile[i] = new FormData();
			formFile[i].append('file', file);
			  $.ajax({
					url:upapi,
					type:'post',
					data:formFile[i],
					processData: false,
					contentType: false,
					async:false, //同步执行
					dataType:'json',
					success:function(result){
						if(result.code==1){
							console.log(i+"完成")
						  if(tmp_save_pic==""){
								tmp_save_pic=result.data.url;
						  }else{
								tmp_save_pic+=","+result.data.url;
						  }
						  done_count=done_count+1
						  console.log(done_count)
						  console.log(imgFile.length)
						  if(done_count==imgFile.length){
						  	save_pic_input.val(tmp_save_pic); //把上传的图片url输入到文本框
								callback();//上传完成后回调
						  }	
						}else{
							msg(result.msg);
						}
					}
			  });      
		});
}

快捷键：jsuppic

源：

sublime_text格式

<snippet>
    <content><![CDATA[
// \$("#qy_sfz_images").val("");	
// function addorder(_this) {
// 	if(\$(".piclist").find("li").length<2 && \$("#qy_sfz_images").length>0){
// 		msg("请选择您的身份证正反面")
// 		return false;
// 	}else{
// 		that=_this
// 		upimage(function () {
// 			return form_submit(that);
// 		})	
// 	}
// 	return false;
// }


var imgFile = []; //文件流
var imgSrc = []; //图片路径
var imgName = []; //图片名字

var input_files=\$('#files_btn');//文件域
var imgBox=".piclist"; //预览区
var max_pic_count=2; //最大选择图片数
var addpic=\$(".addpic"); //上传按钮
var upapi="/api/common/upload" //上传接口
var save_pic_input=\$("#qy_sfz_images") //上传后保存url的文本框 
var tmp_save_pic="";//上传成功后url临时存放变量

//选择文件	
//accept= camera--照相机； camcorder--摄像机； microphone--录音 ; sel--选择视频或图像 ； selimg-选择图像
//act=sel 选择 act 相机

function click_add_files(){
	input_files.click()
}
\$(document).ready(function(){
	//图片选择后数据处理
	input_files.on('change', function(e) {
			console.log("选择文件")
	    var fileList = this.files;
			if(!checkfiles(fileList)){return false;}
	    for (var i = 0; i < fileList.length; i++) {
	        var imgSrcI = getObjectURL(fileList[i]);
	        imgName.push(fileList[i].name);
	        imgSrc.push(imgSrcI);
	        imgFile.push(fileList[i]);
	    }
	    addNewContent(imgBox);
	    this.value = null; //上传相同图片
	});
});
//获得文件名的扩展名
function getExtension(name) {
      return name.substring(name.lastIndexOf(".")+1)
}

//检查文件数据
function checkfiles(fileList) {
	 var pic_count=0;
	 var tmpfileList=[];
	 for(var i=0;i<fileList.length;i++){
		 tmpfileList.push(fileList[i]);
	 }
	 
	 for(var i=0;i<imgFile.length;i++){
		 tmpfileList.push(imgFile[i]);
	 }
	//新加临时组用于检查文件数据
     console.log("tmpfileList:")
     console.log(tmpfileList)
	  for(var i=0;i<tmpfileList.length;i++){
		  if(getExtension(tmpfileList[i].name)=="jpg" || getExtension(tmpfileList[i].name)=="jpeg" || getExtension(tmpfileList[i].name)=="png" || getExtension(tmpfileList[i].name)=="gif"){
			  pic_count++;
		  }else{
			  msg("只允许上传jpg,png,gif格式的图片！")
			  return false;
		  }
	  }
	  if(pic_count>max_pic_count){
		 msg("最多只能选择"+max_pic_count+"张图片")
		 return false;
    }
		if (pic_count >= max_pic_count) { //隐藏上传按钮
			addpic.hide();
		}	 
	 	return true
}

//删除
function removeImg(index) {
    imgSrc.splice(index, 1);
    imgFile.splice(index, 1);
    imgName.splice(index, 1);
    addNewContent(imgBox);
    if(imgFile.length<max_pic_count){
    	addpic.show();
    }
}
//图片展示
function addNewContent(obj) {
     console.log(imgFile)
    \$(obj).html("");
		var newbox="";
    for (var a = 0; a < imgFile.length; a++) {
    	newbox+='<li><img src="'+imgSrc[a]+'" class="img" ><span class="cha" onclick="removeImg('+a+')"></span></li>';
    }
	 \$(obj).html(newbox);
}

//建立可存取到file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

function upimage(callback) {
		save_pic_input.val("");
		var done_count=0;
		var formFile=new Array();
		\$.each(imgFile, function(i, file) {
			console.log("上传"+i)
			formFile[i] = new FormData();
			formFile[i].append('file', file);
			  \$.ajax({
					url:upapi,
					type:'post',
					data:formFile[i],
					processData: false,
					contentType: false,
					async:false, //同步执行
					dataType:'json',
					success:function(result){
						if(result.code==1){
							console.log(i+"完成")
						  if(tmp_save_pic==""){
								tmp_save_pic=result.data.url;
						  }else{
								tmp_save_pic+=","+result.data.url;
						  }
						  done_count=done_count+1
						  console.log(done_count)
						  console.log(imgFile.length)
						  if(done_count==imgFile.length){
						  	save_pic_input.val(tmp_save_pic); //把上传的图片url输入到文本框
								callback();//上传完成后回调
						  }	
						}else{
							msg(result.msg);
						}
					}
			  });      
		});
}
]]></content>
   <tabTrigger>jsuppic(js多图上传)</tabTrigger>
   <scope></scope>
</snippet>
点赞(0)
点击复制
点击复制
js base64编码
js base64编码
获取当前或上级栏目图片
获取当前或上级栏目图片
计算当前时间双色球的期号
计算当前时间双色球的期号

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论 返回
顶部