图片上传并在本地显示和限定textArea输入文字个数

最新推荐文章于 2024-02-20 19:34:17 发布

qq_2669461455

最新推荐文章于 2024-02-20 19:34:17 发布

阅读量584

点赞数

文章标签： javascript html node.js

本文链接：https://blog.csdn.net/qq_33002773/article/details/120430953

版权

方法一

<label for="kk">
   <img id="imgkk" data-src="./images/page_05_2.png" width="105" height="105" />
</label>
<input name="" id="kk" type="file" class="f">

隐藏input然后设置label样式即可！

获取上传的图片的地址：

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 ;  
}

更改为获取到的图片：

 $("#kk").change(function(){  
    var objUrl = getObjectURL(this.files[0]) ;  
    if (objUrl) {  
        $("#imgkk").attr("src", objUrl) ;  
    }  
   }) ;

方法2
cos-js-init.js

	var Bucket = 'up-1252599784';
	var Region = 'ap-guangzhou';     /* 存储桶所在地域，必须字段 */
	// 初始化实例
	var cos = new COS({
	  getAuthorization: function (options, callback) {
		  console.log('options',options) // 注：要在使用cos来进行动作时(如cos.putObject)才会执行这个，初始化时是不会打印的
		  // 异步获取临时密钥
		  $.get('https://gzmylike.com/test/sts.php', {
			  bucket: options.Bucket,
			  region: options.Region,
		  }, function (data) {
			  console.log('data',data)
			  var credentials = data && data.credentials;
			  if (!data || !credentials) return console.error('credentials invalid');
			  callback({
				  TmpSecretId: credentials.tmpSecretId,
				  TmpSecretKey: credentials.tmpSecretKey,
				  XCosSecurityToken: credentials.sessionToken,
				  // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
				  StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
				  ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
			  });
		  });
	  }
	});
	
	function upOssFile(fileExt, fileObj, callback){
		var fileName = new Date().getFullYear() + '/' + (new Date().getMonth()+1) + '/' + Date.parse(new Date()).toString().substr(0, 10) + '.' + fileExt
		// 接下来可以通过 cos 实例调用 COS 请求。
		// TODO
		cos.putObject({
		   Bucket: Bucket, /* 必须 */
		   Region: Region,     /* 存储桶所在地域，必须字段 */
		   Key: fileName, //,'exampleobject',              /* 必须 文件名 */
		   StorageClass: 'STANDARD',
		   Body: fileObj, // 上传文件对象fileObject：如document.getElementById('file1').files[0] 或$('#file1').get(0).files[0]  //Error: params body format error, Only allow File|Blob|String.
		   onProgress: function(progressData) {
			   console.log(JSON.stringify(progressData)); 
		   }
		}, function(err, data) {
		    console.log(err || data);  //{ statusCode: 200, headers: {"content-length": "0"}, Location: "up-1252599784.cos.ap-guangzhou.myqcloud.com/exampleobject", ETag: "" }
		    callback && callback('https://'+data.Location); //callback(OssDomain + fileName);
		});
		
	}

function isPhone(str) {
	return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(str);
}

html

<form name='testform' id="form1">
<div class="b-page2 a-flipinY">
   <div class="t1">会员信息</div>
   <input type="text" placeholder="姓名" class="u-name text title" id="u-name" value="" name="title"/>
	<input type="text" placeholder="手机" class="u-tel text mycall" id="u-tel" value="" name="mycall"/>
</div>
<div style="display: inline-block;width: 364px;height: 87px;margin-right: 5px;">
	<img src="images/p4-2.png" style="width: 100%">
	<input type="file" value="" accept="image/*" class="pz file filee" name="pz" id="kk">
</div>
<div class="b-page2 a-flipinY">
   <div class="t1">请简单讲述你与美莱的美丽故事</div>
   <textarea rows="" cols="" class="txt comment" placeholder="内容：不超过200字..." name="comment" onchange="this.value=this.value.substring(0,200)" onkeydown="this.value=this.value.substring(0,200)" onkeyup="this.value=this.value.substring(0,200)"></textarea>
	<a href="javascript:;" class="btn submit-btn"></a>
</div>
</form>

在这里插入图片描述

index.js

var imgMaxNum = 5; //最大可以添加的图片数量
var minUploadNum = 2; //最少要上传数量
var uploadedArr = new Array(imgMaxNum).fill(''); //以最大添加数量为长度新建一个数组
var maxUploadVideoSize = 15; //视频最大不超过，单位M
var maxUploadImgSize = 8; //图片最在不超过，单位M
var curIndex = 0; //当前上传操作的索引
var pzImg = ''; //消费凭证
var sp = ''; //视频
var isUploading = false; //是否上传文件中
function uploadimage(that) {}

function getExt(filePath) {
	//文件路径
	//filePath = "file://upload/jb51.png";
	//获取最后一个.的位置
	var index= filePath.lastIndexOf(".");
	if(index==-1) return false;
	//获取后缀
	var ext = filePath.substr(index+1).toLowerCase();
	//输出结果
	return ext
}



//选择文件上传
$(document).on('change','.pz', function(){
	//console.log(123, $(this).val()	)
	var fileObj = $(this).get(0).files[0];
	var name = fileObj.name;
	var ext = getExt(name);
	if(!ext) {
		alert('请上传合适的文件类型');
		return;
	}
	var self = this
	
	//文件大小限制
	if($(self).hasClass('pz')){
		if(ext!="jpg" && ext!="png" && ext!="jpeg" && ext!="gif") { //accept限制只可上传图片但还可以上传mov. mov可以转换为gif, 苹果livp可解压为jpeg+mov
			alert('请上传合适的图片类型');
			return;
		}
		if(fileObj.size>maxUploadImgSize*1024*1024){
			alert(`请选择小于${maxUploadImgSize}M的图片！`);
			return;	
		}
	}
	
	$(self).parent().children('img').attr('src', './images/loading.gif'); //loading
	$(self).parent().children('img').css({width: '80px', height: '80px'});

	isUploading = true;
	upOssFile(ext, fileObj, function(fileName){
		//console.log(fileName)	//2021/5/1620189301.png
		if($(self).hasClass('pz')){
			pzImg = fileName;	
			$(self).parent().children('img').attr('src', window.URL.createObjectURL(fileObj));  //预览本地图片
			$(self).parent().children('img').css({width: '80px', height: '80px'});  //预览本地图片
		}
		isUploading = false;
	})
	//没提交前就上传好吗？
})



//继续添加图片
$('#goadd').click(function(){
	if($('#img_con').find('.file_sel').length>=imgMaxNum) { $(this).hide(); return; } 
	$('#img_con').append('<div> <img src="./images/p4-2.png"><input type="file" value="" accept="image/png,image/gif,image/jpg,image/jpeg" οnchange="uploadimage(this)" class="file_sel file1 filee whole_pic_two" ></div>')	
})

//提交表单
$(document).on('click', '.submit-btn', function(){
	//校验表单
    var u_name=$('.u-name').val();
    var u_tel=$('.u-tel').val();
    var u_xm=$('.riji').val();
    var u_pj=$('.comment').val();
	
    if($.trim(u_name)==""){
        alert("姓名不能为空！！！");
		$('.u-name').focus();
        return false;
    }
    if($.trim(u_tel)==""){
        alert("手机不能为空！！！");
		$('.u-tel').focus();
        return false;
    }
	if(!isPhone(u_tel)){
		alert("请输入正确的11位手机号码！");
		$('.u-tel').select();
		return false;
	}
    /*if($.trim(u_xm)==''){
        alert("请输入您的项目");
		$('.riji').focus();

        return false;
    }*/
    if($.trim(u_pj)==''){
        alert("请输入您的美丽故事");
		$('.comment').focus();
        return false;
    }
	if($.trim(u_pj).length > 199){
		alert("故事不能超过200字！");
		$(".comment").focus();
		return false;
	}
	
		
	//放在下面两个检测前，应该放所有文件检测最前面最好了。因为下面两个pzImg值是在上传完成后才有的。假如放在它们后这个就永远都是在上传完成后，就没必要放了
	if(isUploading) {
		alert('有文件正在上传中，请等文件上传完毕再提交！');
		return;
	}
	
	/*var fileObjArr = [];
	$('.file_sel').each(function(index, element) {
        if($(this).val()){
			fileObjArr.push($(this).get(0).files[0]);
		}
    });
	if(fileObjArr.length<minUploadNum) {alert(`请至少上传${minUploadNum}张图片！`); return;}
	console.log(fileObjArr)*/
	
	goodArr = uploadedArr.filter(function(i){return i!=''})

	/*if(goodArr.length<minUploadNum) {
		alert(`请至少上传${minUploadNum}张图片！`);
		return;
	}*/
	
	if(!pzImg) {
		alert('请上传正面素颜图片！');
		return;
	}
	/*if(!sp) {
		alert('请上传视频！');
		return;
	}*/

	//将凭证和视频也并到goodArr里去
	goodArr.push(pzImg);
	//goodArr.push(sp);
	
	/*var html = '';
	for(var i=0; i<goodArr.length; i++){
		html += '<a href="'+goodArr[i]+'" target="_blank"><img width="30" src="'+goodArr[i]+'"/></a>\t';
	}*/
	var html = goodArr.join(',');
	
	var formFile = new FormData();	
	formFile.append("enews", 'AddFeedback');
	formFile.append("type", 'ajax');
	formFile.append("bid", '62');
	formFile.append("source",window.location.href);
	formFile.append("title",u_name);
	formFile.append("mycall",u_tel);
	//formFile.append("bmxm", u_xm);
	//formFile.append("file", pzVal);
	formFile.append("saytext",u_pj);
	formFile.append("images", html); //后台不能用这种是附件类型的字段来接收：如zmpic

	console.log(html,u_pj,u_tel,u_name)
	//return;

	$.ajax({
		url: '/e/enews/index.php',
		type: 'post',
		data: formFile,
		cache: false,
		processData: false,
		contentType: false,
		dataType: "json",
		success: function (data) {
			console.log(data);
			if (data.code == 1) {
			    alert('您的征集信息已提交，感谢参与!');
				resetData();
			}else if(data.code > 1){
			  alert(data.msg);
			}else{
			  alert('提交失败,请联系网络管理员！');
			}
		},
		error:function(xhr){
			alert(xhr.status+'\n'+xhr.resposneText)
		}
	})

})	

//重置操作
function resetData(){
	$('#form1').get(0).reset();
	$('.file_sel, .pz').parent().children('img').attr('src', './images/p4-2.png');  //清除本地图片预览
	$('.file_sel, .pz').parent().children('img').css({width: '100%', height: '80px'});
	//$('.sp').parent().children('img').attr('src', './images/p4-3.png'); //视频的本地图片
	//数据重置
	uploadedArr = new Array(imgMaxNum).fill(''); //以最大添加数量为长度新建一个数组
	curIndex = 0; //当前上传操作的索引
	pzImg = ''; //消费凭证
	sp = ''; //视频
	isUploading = false; //是否上传文件中
}

限定输文字入个数

<textarea id="textArea" placeholder="胸部困扰：(简述20字内即可)" onchange="this.value=this.value.substring(0,20)" onkeydown="this.value=this.value.substring(0,20)" onkeyup="this.value=this.value.substring(0,20)"></textarea>

qq_2669461455

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传并在本地显示和限定textArea输入文字个数

方法一<label for="kk"> <img id="imgkk" data-src="./images/page_05_2.png" width="105" height="105" /></label><input name="" id="kk" type="file" class="f">隐藏input然后设置label样式即可！获取上传的图片的地址：function getObjectURL(file) { var
复制链接

扫一扫