當前位置:首頁 » 文件管理 » 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 03:41:10 瀏覽:17
豆瓣存儲佔用 發布:2025-03-30 03:37:50 瀏覽:678
我的世界java代碼 發布:2025-03-30 03:35:54 瀏覽:44
反編譯怎麼裝 發布:2025-03-30 03:24:24 瀏覽:957
蘋果手機160存儲 發布:2025-03-30 03:18:10 瀏覽:883
識別畫面腳本 發布:2025-03-30 03:18:07 瀏覽:6
qq無法訪問指定設備 發布:2025-03-30 03:15:55 瀏覽:290
java繪圖 發布:2025-03-30 03:12:58 瀏覽:867
V電影的視頻緩存 發布:2025-03-30 03:12:26 瀏覽:220
samba源碼 發布:2025-03-30 02:53:45 瀏覽:486