当前位置:首页 » 文件管理 » jquery上传图片限制

jquery上传图片限制

发布时间: 2025-03-27 01:01:06

❶ jquery 怎么限制上传图片大小

这个Jquery自身是做不了的,因为现在浏览器都限制JS读取本地文件属性,所以就没有办法去做了。常见的做法有2种:

  1. 将文件上传到服务器后,通过服务器端程序读取上传的文件大小再做处理;

  2. 客户端使用Flash来作为上传的介质(克通过Jquery操作),通过Flash特有的权限读取本地文件属性来做判断和限制,比如SWFUpload,Jquery Uploadify之类的都是这种方法。

❷ jquery怎样限制上传图片的大小和像素宽高

用html5的file reader来读取上传图片的width,height,size等信息,
然后进行判断给出用户反馈

❸ 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的值返回相应的布尔值。

通过这种方式,可以有效地校验用户上传的图片是否符合要求,从而保证网站或应用的正常运行。

❹ 有哪些好用的 jQuery 图片上传插件

1、uploadify
它是针对jQuery的免费文件上传插件,可以轻松将单个或多个文件上传到网站上,可控制并发上传的文件数,通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。

2、FancyUpload
它是一个由CSS和XHTML编写样式的Ajax文件上传工具,安装简便,服务器独立,由MooTools模块驱动,可以在任何现代浏览器上使用。

3、Aurigma Upload Suite(Image Uploader)
这是一个不限大小,不限格式的文件/图片批量上传工具,是收费控件。它支持云端存储和客户端文件处理,支持断点续传,稳定可靠。从8.0.8开始,Image Uploader将名称改为"Aurigma Upload Suite"。

❺ jqueryajax不能上传图片

不能上传的原因可能是jquery插件使用不正确。

解决方法:

1、在head之间加入jquery引用

<scripttype="text/javascript" src="jquery.js"></script>

<scriptsrc="project/js/jquery.form.js" type="text/javascript"></script>

<scriptsrc="project/js/fileload.js" type="text/javascript"></script>

2、定义fileload.js,代码如下:

function createHtml(obj) {
var htmstr = [];
htmstr.push( "<form id='_fileForm' enctype='multipart/form-data'>");
htmstr.push( "<table cellspacing="0" cellpadding="3" style="margin:0 auto; margin-top:20px;">");
htmstr.push( "<tr>");
htmstr.push( "<td class="tdt tdl">请选择文件:</td>");
htmstr.push( "<td class="tdt tdl"><input id="loadcontrol" type="file" name="filepath" id="filepath" /></td>");
htmstr.push( "<td class="tdt tdl tdr"><input type="button" onclick="fileloadon()" value="上传"/></td>");
htmstr.push( "</tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" colspan='3'style='text-align:center;'><div id="msg">&nbsp;</div></td> </tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" style=" vertical-align:middle;">图片预览:</td> <td class="tdt tdl tdr" colspan="2"><div style="text-align:center;"><img src="project/Images/NoPhoto.jpg"/></div></td> </tr>");
htmstr.push( "</table>")
htmstr.push( "</form>");
obj.html(htmstr.join(""));
}

function fileloadon() {
$("#msg").html("");
$("img").attr({ "src": "project/Images/processing.gif" });
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "project/help.aspx",
success: function (data1) {
var remsg = data1.split("|");
var name = remsg[1].split("/");
if (remsg[0] == "1") {
var type = name[4].substring(name[4].indexOf("."), name[4].length);
$("#msg").html("文件名:" + name[name.length - 1] + " --- " + remsg[2]);
switch (type) {
case ".jpg":
case ".jpeg":
case ".gif":
case ".bmp":
case ".png":
$("img").attr({ "src": remsg[1] });
break;
default:
$("img").attr({ "src": "project/Images/msg_ok.png" });
break;
}
} else {
$("#msg").html("文件上传失败:" + remsg[2]);
$("img").attr({ "src": "project/Images/msg_error.png" });
}
},
error: function (msg) {
alert("文件上传失败");
}
});
return false;
});
$("#_fileForm").submit();
}

3、服务端处理上传。

protected void Page_Load(object sender, EventArgs e)
{
try
{
HttpPostedFile postFile = Request.Files[0];
//开始上传
string _savedFileResult = UpLoadFile(postFile);
Response.Write(_savedFileResult);

}
catch(Exception ex)
{
Response.Write("0|error|上传提交出错");
}

}
public string UpLoadFile(HttpPostedFile str)
{
return UpLoadFile(str, "/UpLoadFile/");
}
public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
{
try
{
//获取要保存的文件信息
string filerealname = httpFile.FileName;
//获得文件扩展名
string fileNameExt = System.IO.Path.GetExtension(filerealname);
if (CheckFileExt(fileNameExt))
{
//检查保存的路径 是否有/结尾
if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";

//按日期归类保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
toFilePath += datePath;
}

//物理完整路径
string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;

//检查是否有该路径 没有就创建
if (!System.IO.Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}

//得到服务器文件保存路径
string toFile = Server.MapPath("~" + toFilePath);
string f_file = getName(filerealname);
//将文件保存至服务器
httpFile.SaveAs(toFile + f_file);
return "1|" + toFilePath + f_file + "|" + "文件上传成功";
}
else
{
return "0|errorfile|" + "文件不合法";
}
}
catch (Exception e)
{
return "0|errorfile|" + "文件上传失败,错误原因:" + e.Message;
}
}

/// <summary>
/// 获取文件名
/// </summary>
/// <param name="fileNamePath"></param>
/// <returns></returns>
private string getName(string fileNamePath)
{
string[] name = fileNamePath.Split('\');
return name[name.Length - 1];
}
/// <summary>
/// 检查是否为合法的上传文件
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;

}

public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("HHmmss"));
serial.Append(rd.Next(100, 999).ToString());
return serial.ToString();
}

4、运行defualt.aspx页面以后显示的效果是:

❻ jquery怎样限制上传图片的大小和像素宽高,分辨率

<scripttype="text/javascript">
functionvalidate_img(a){
varfile=a.value;
if(!/.(gif|jpg|jpeg|png|GIF|JPG|png)$/.test(file)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
returnfalse;
}else{
varimage=newImage();
image.src=file;
varheight=image.height;
varwidth=image.width;
varfilesize=image.filesize;
alert(height+"x.."+filesize);
if(width>80&&height>80&&filesize>102400){
alert('请上传80*80像素或者大小小于100k的图片');
returnfalse;
}
}
alert("图片通过");
}
</script>
图像:<inputtype="file"name="uploadImg"onchange="Javascript:validate_img(this);"size="12"/>

测试的时候放服务器上测试,本地不行的哈~

热点内容
服务器电脑拆解 发布:2025-03-30 01:53:40 浏览:147
起点上传图片 发布:2025-03-30 01:47:00 浏览:233
清理memcache缓存 发布:2025-03-30 01:46:20 浏览:311
安卓手机哪里有倾斜矫正 发布:2025-03-30 01:44:57 浏览:137
禅道数据库访问 发布:2025-03-30 01:38:23 浏览:317
阿里云服务器搭建个人源码博客 发布:2025-03-30 01:26:31 浏览:101
什么人适合学密码学 发布:2025-03-30 01:17:24 浏览:250
java软件开发技术 发布:2025-03-30 01:13:44 浏览:160
emmc存储卡 发布:2025-03-30 01:02:46 浏览:510
如何调节安卓系统的灵敏度 发布:2025-03-30 01:01:22 浏览:901