当前位置:首页 » 文件管理 » 图片上传的js

图片上传的js

发布时间: 2025-01-01 02:21:55

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","地址");关键就是获取图片地址给弄上去

热点内容
win10文件夹乱码 发布:2025-01-05 23:07:50 浏览:981
黑妞ftp 发布:2025-01-05 22:56:08 浏览:774
便宜的安卓手机用哪个系统好 发布:2025-01-05 22:54:37 浏览:239
联通账号密码在哪里输 发布:2025-01-05 22:49:41 浏览:657
我的世界如何开15个人的服务器 发布:2025-01-05 22:43:40 浏览:205
this访问static变量 发布:2025-01-05 22:23:11 浏览:190
路由器的首选dns服务器怎么填 发布:2025-01-05 22:02:43 浏览:423
梯度增长算法 发布:2025-01-05 21:59:05 浏览:120
搭建sstp服务器教程 发布:2025-01-05 21:56:52 浏览:707
如何删减网易我的世界服务器内存 发布:2025-01-05 21:56:43 浏览:873