方法一
<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>