上傳圖片過濾方法js_求js正則表達式過濾圖片地址謝了

① js中怎樣實現數組過濾函數filter

filter 是根據返回的值是否為真來判斷是否保留元素，所以可以這樣實現

Array.prototype.filter=Array.prototype.filter||function(func){
vararr=this;
varr=[];
for(vari=0;i<arr.length;i++){
if(func(arr[i])){
r.push(arr[i]);
}
}
returnr;
}

因為目前大部分瀏覽器有 filter 實現，所以測試時只能改個名字叫 filterx，下面是測試代碼

vardata=[1,2,3,4,5,6,7];
Array.prototype.filterx=Array.prototype.filterx||function(func){
vararr=this;
varr=[];
for(vari=0;i<arr.length;i++){
if(func(arr[i])){
r.push(arr[i]);
}
}
returnr;
}
console.log(data.filter(function(t){
returnt%3>0;
}));
console.log(data.filterx(function(t){
returnt%3>0;
}));

② js/jquery上傳圖片的問題

③ javascript對用戶上傳的圖片進行處理

這個對javascript來說有點勉為其難了。不過你可以在伺服器端用圖像處理組件（比如ASPJpeg）來做這樣的事。以下是把任意大小的圖片處理成120*160的例子(ASP)：
<%
Set Jpeg = Server.CreateObject("Persits.Jpeg")
Jpeg.Open Server.MapPath("原圖片的路徑及文件名")
Jpeg.Quality = 80 '圖片壓縮後的顯示質量
Jpeg.Width = 120 '壓縮後的圖片寬度
Jpeg.Height = 160 '壓縮後的圖片高度
set fso=server.createobject("scripting.filesystemobject")
Jpeg.Save Server.MapPath("處理後的圖片路徑及文件名")
Jpeg.Close
Set Jpeg = Nothing
%>
通過這個你就可以對用戶上傳的圖片進行尺寸調整，具體多大的尺寸可以使圖片的位元組數控制在65K內就你自己去試了。
PS:目前大部分的WEB伺服器都支持ASPJpeg組件的。

④ js 不用flash多選文件上傳

做上傳圖片功能的時候，經常會遇到這樣一個問題，有時候可能需要一次上傳多張圖片，而用html中默認的上控制項，卻只能選定一個文件，且不能對文件的後綴進行篩選。需要一次上傳多個文件的需求，往往可以通過添加多個上傳控制項來予以滿足，比如網路空間的相冊上傳功能就是這樣來實現的。不過，要實現對上傳文件後綴的過濾，卻始終無法通過常規的方法予以實現。這兩個功能真的這么難以實現嗎？非也，看看flickr的上傳功能即可獲得明確的答復。為什麼能實現這樣的功能呢？google了一下，謎底就揭曉了。原來，這是利用了flash的若干功能，通過javascript和 actionscript的交互得以實現的。js和as的通訊以前有研究過，所以要實現起來非常簡單。再到flash里邊f1一下，關於上傳方面的相關只是也差不多了解了，因此，接下來的事情的就只是順水推舟的事情了。最重要的還是flash代碼的完善，最後的成果如下：
Java代碼
// MultiUploader.fla
import flash.net.FileReferenceList;
import flash.net.FileReference;
import flash.external.ExternalInterface;

// 設置as中函數和js調用時的映射關系
ExternalInterface.addCallback("fu_open_dialog", null, openDialog);
ExternalInterface.addCallback("fu_begin_upload", null, beginUpload);

// 可以通過html頁面里邊設置FlashVars里邊的upload_url來更改上傳文件的路徑
var uploadUrl:String = typeof(_root.upload_url) == "undefined" ? "FlashUpload.ashx" : _root.upload_url;
var listener:Object = new Object();
// 選擇文件後，會視圖調用js函數onUploaderSelect，並將文件列表傳入進去，便於js進一步做一些邏輯控制
listener.onSelect = function(fileRefList:FileReferenceList) {
ExternalInterface.call("onUploaderSelect", fileRefList.fileList);
};

var fileRefList:FileReferenceList = null;
var imageTypes:Object = new Object();
imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)"; // 上傳文件類型說明
imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png"; // 控制上傳文件類型

// 顯示文件打開窗口
function openDialog():Void {
if (fileRefList == null) {
fileRefList = new FileReferenceList();
fileRefList.addListener(listener);
}
fileRefList.browse([imageTypes]);
}
// 開始上傳
function beginUpload():Void {
var lis = new Object();
// 每上傳完一個文件後調用js函數onUploaderComplete
lis.onComplete = function(file:FileReference):Void {
ExternalInterface.call("onUploaderComplete", file.name);
};
// 處理上傳地址的http狀態錯誤。比如404等。
lis.onHTTPError = function(file:FileReference, httpError: Number):Void {
ExternalInterface.call("onUploaderHTTPError", httpError, file.name);
}

var list:Array = fileRefList.fileList;
var item:FileReference;
// 最終還是將文件分單次傳到指定上傳頁面進行處理
for(var i:Number = 0; i < list.length; i++) {
item = list[i];
item.addListener(lis);
item.upload(uploadUrl);
}
}
// MultiUploader.fla
import flash.net.FileReferenceList;
import flash.net.FileReference;
import flash.external.ExternalInterface;

// 設置as中函數和js調用時的映射關系
ExternalInterface.addCallback("fu_open_dialog", null, openDialog);
ExternalInterface.addCallback("fu_begin_upload", null, beginUpload);

// 可以通過html頁面里邊設置FlashVars里邊的upload_url來更改上傳文件的路徑
var uploadUrl:String = typeof(_root.upload_url) =="undefined"?"FlashUpload.ashx": _root.upload_url;
var listener:Object = new Object();
// 選擇文件後，會視圖調用js函數onUploaderSelect，並將文件列表傳入進去，便於js進一步做一些邏輯控制
listener.onSelect = function(fileRefList:FileReferenceList) {
ExternalInterface.call("onUploaderSelect", fileRefList.fileList);
};

var fileRefList:FileReferenceList = null;
var imageTypes:Object = new Object();
imageTypes.description ="Images (*.jpg, *.jpeg, *.gif, *.png)"; // 上傳文件類型說明
imageTypes.extension ="*.jpg; *.jpeg; *.gif; *.png"; // 控制上傳文件類型

// 顯示文件打開窗口
function openDialog():Void {
if (fileRefList == null) {
fileRefList = new FileReferenceList();
fileRefList.addListener(listener);
}
fileRefList.browse([imageTypes]);
}
// 開始上傳
function beginUpload():Void {
var lis = new Object();
// 每上傳完一個文件後調用js函數onUploaderComplete
lis.onComplete = function(file:FileReference):Void {
ExternalInterface.call("onUploaderComplete", file.name);
};
// 處理上傳地址的http狀態錯誤。比如404等。
lis.onHTTPError = function(file:FileReference, httpError: Number):Void {
ExternalInterface.call("onUploaderHTTPError", httpError, file.name);
}

var list:Array = fileRefList.fileList;
var item:FileReference;
// 最終還是將文件分單次傳到指定上傳頁面進行處理
for(var i:Number = 0; i < list.length; i++) {
item = list[i];
item.addListener(lis);
item.upload(uploadUrl);
}
}

至於客戶端的處理，只需要將as中自動調用的幾個js函數實現即可。最後的頁面代碼如下：
Java代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="open" onclick="openUploadDialog();"/>
<input type="button" value="upload" onclick="uploadFiles();"/>

<div id="flashPanel"></div>

</body>
<script type="text/javascript">
var flash = createUploadFlash(document.getElementById('flashPanel'), 'upload.swf', 'FlashUpload.ashx')
// 打開文件對話框
function openUploadDialog() {
flash.fu_open_dialog();
}
// 上傳文件
function uploadFiles() {
flash.fu_begin_upload();
}

// 選擇文件以後
function onUploaderSelect(list) {
alert(list);
}

// 上傳完一個文件以後
function onUploaderComplete(name) {
alert(name);
}

// 上傳文件出錯時
function onUploaderHTTPError(number, name) {
switch (number) {
case 413:
alert("文件" + name + "大於10K，不能上傳");
break;
}
}
/**
* 創建一個flash。主要是在ie7里邊需要用滑鼠點擊才能激活flash，通過動態生成flash的方式可以繞過這一點。
* @param panel 用來放置flash的div
* @param flashUrl flash的地址
* @param uploadUrl 用來出來上傳文件的地址
*/
function createUploadFlash(panel, flashUrl, uploadUrl){
var code = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="0" height="0" id="flashObject" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="' + flashUrl + '" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="upload_url=' + uploadUrl + '" />
<embed src="' + flashUrl + '" quality="high" bgcolor="#ffffff" width="0" height="0" name="flashObject" FlashVars="upload_url=' + uploadUrl + '" align="middle" allowScriptAccess="sameDomain" id="flashObject" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>';
panel.innerHTML = code;
return window.document.flashObject;
}

</script>
</html>
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button"value="open"onclick="openUploadDialog();"/>
<input type="button"value="upload"onclick="uploadFiles();"/>

<div id="flashPanel"></div>

</body>
<script type="text/javascript">
var flash = createUploadFlash(document.getElementById('flashPanel'), 'upload.swf', 'FlashUpload.ashx')
// 打開文件對話框
function openUploadDialog() {
flash.fu_open_dialog();
}
// 上傳文件
function uploadFiles() {
flash.fu_begin_upload();
}

// 選擇文件以後
function onUploaderSelect(list) {
alert(list);
}

// 上傳完一個文件以後
function onUploaderComplete(name) {
alert(name);
}

// 上傳文件出錯時
function onUploaderHTTPError(number, name) {
switch (number) {
case 413:
alert("文件"+ name +"大於10K，不能上傳");
break;
}
}
/**
* 創建一個flash。主要是在ie7里邊需要用滑鼠點擊才能激活flash，通過動態生成flash的方式可以繞過這一點。
* @param panel 用來放置flash的div
* @param flashUrl flash的地址
* @param uploadUrl 用來出來上傳文件的地址
*/
function createUploadFlash(panel, flashUrl, uploadUrl){
var code = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"width="0"height="0"id="flashObject"align="middle">
<param name="allowScriptAccess"value="sameDomain"/>
<param name="movie"value="' + flashUrl + '"/>
<param name="quality"value="high"/>
<param name="bgcolor"value="#ffffff"/>
<param name="FlashVars"value="upload_url=' + uploadUrl + '"/>
<embed src="' + flashUrl + '"quality="high"bgcolor="#ffffff"width="0"height="0"name="flashObject"FlashVars="upload_url=' + uploadUrl + '"align="middle"allowScriptAccess="sameDomain"id="flashObject"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>';
panel.innerHTML = code;
return window.document.flashObject;
}

</script>
</html>

這次功能的實現上，在其他方面都還很順利得以實現，反而是在createUploadFlash這個函數的實現上遇到了一些麻煩。因為最後返回flash對象的時候經常不被正常地識別。如果這段代碼不用js生成，那麼用 document.flashObject和dobument.getElementById('flashObject')都可以正常識別 flashObject，但動態生成以後，用後者就不能正常被訪問到了，可能的原因是載入需要一定的延時，有待研究。通過這樣的方式實現文件上傳，一則能解決掉多選問題和文件類型過濾問題，另外也能實現文件的無刷新上傳，可以在圖片上傳的同時去進行別的工作。

⑤ 求js正則表達式過濾圖片地址謝了

var img=document.getElementsByTagName("img");
for(var i=0;i<img.length;i++){
var goal=img[i].getAttribute("src");
var reg=/\/upload\/201109\/\d+\.jpg/;
//可以根據需求設置你的正則表達式。
if(goal.test(reg)){
//do something you want.
}
}

導航:首頁 > 使用方法 > 上傳圖片過濾方法js

上傳圖片過濾方法js

與上傳圖片過濾方法js相關的資料