图片上传的js
A. 客户端限制只能上传jpg格式图片的js代码
复制代码
代码如下:
function
checkPhoto(fnUpload)
{
var
filename
=
fnUpload.value;
alert(filename);
var
mime
=
filename.toLowerCase().substr(filename.lastIndexOf("."));
if(mime!=".jpg")
{
alert("请选择jpg格式的照片上传");
fnUpload.outerHTML=fnUpload.outerHTML;
}
}
B. js/jquery校验上传图片后缀为gif|png|jpeg|jpg格式的图片,尺寸为512*512 校验,大小限制为300k的文件
在使用javaScript或jQuery校验上传图片时,确保图片后缀为.gif、.jpeg、.jpg或.png,并且尺寸为512*512,大小限制为300k,可以按照以下步骤进行操作:
首先,定义一个函数validate_edit_logo,接收一个参数a,用于判断是否需要返回布尔值。获取文件输入框的值,判断文件后缀是否符合要求,不符合则弹出提示信息并根据a的值决定是否返回false。
如果文件后缀符合要求,则创建一个image对象,设置其src属性为文件路径。获取图片的高度和宽度,以及文件大小。将图片元素添加到页面中,并显示相应的div区域。
接着,检查图片的宽度和高度是否超过512px,文件大小是否超过300k。如果条件都满足,则弹出提示信息并根据a的值决定是否返回false。
最后,根据a的值返回相应的布尔值。
通过这种方式,可以有效地校验用户上传的图片是否符合要求,从而保证网站或应用的正常运行。
C. 上传照片,并且马上能预览到缩略图,这用的是哪个js插件
无需插件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By:DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>
D. 我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
WebUploader项目,符合你的要求。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重复创建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上传成功,给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上传失败,显示上传出错。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重复创建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
//完成上传完了,成功或者失败,先删除进度条。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
更多细节,请查看js源码。
E. 求js或JQ代码,实现图片上传后在指定的div中以背景图显示
如果是background的话使用 $("div").css("background-image","图片地址"),如果使用的img的话使用$("div").attr("src","地址");关键就是获取图片地址给弄上去