圖片上傳的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","地址");關鍵就是獲取圖片地址給弄上去