导航:首页 > 使用方法 > 上传图片过滤方法js

上传图片过滤方法js

 发布时间：2022-07-19 21:28:12

① 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上传图片的问题

function showImage(fileid,imgid,atagID){
var ext = "_0";
var thumb = $('img#'+imgid);
var litbox = $('a#'+atagID);
var img1path = document.getElementById("img1path");;
if($('.onTeedaError').length>0){
//img1path.value="";
}
var messages =document.getElementById("messages");
if(messages!=null){
//img1path.value="";
}
new AjaxUpload(fileid, {
action: '../../PdfChangeImgUploadServlet?pdfNameEnd=_PERT',
name: ext,
onSubmit: function(file, extension) {
extension=extension.toLowerCase();
if(extension=="pdf")
{
$("#photoError").hide();
$.blockUI({
message: $('span#displayBox'),
css: {
border: 'none',
width: '270px',
}
});
}else{
$("#photoError").show();
return false;
}
},
onComplete: function(file, response) {
$('.pdfImg').remove();
$('#pfont').hide();
$.unblockUI();
var res = eval('('+response+');');
var timestemp = new Date().getTime();
var srcStr = res['srcStr'];
$('#addImg').val(res['srcStr']);
var imgWidth = res['w'] + "px";
var imgHeight = res['h'] + "px";
$("#addImgWidth").val(imgWidth);
$("#addImgHeight").val(imgHeight);
var str = "";
var arr = [];
arr = srcStr.split(",");
$('#imgFile').attr("value",srcStr);
for(var i=0;i<arr.length;i++){
var jpgsrc = arr[i] + '?'+ timestemp;
if(i == 0){
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
} else {
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;display:none;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
}
}
$('#imgFontDiv').append(str);
//thumb.attr('src', res['src']+'?'+timestemp);
//litbox.attr('href', res['src']+'?'+timestemp);
lightbox.refresh();
$('.jpgImgFont').attr('style', 'width: ' + imgWidth + '; height: ' + imgHeight + ";" ).hide().fadeIn('slow');

if(res['img1path']!=""){
img1path.value=res['img1path'];
}

if (imgid == 'imgFont') {
document.getElementById("photoName").value=res['srcStr'].substring(res['srcStr'].lastIndexOf("/")+1);
}
//}

}
});

}

function goClearPhoto(textID,imgID,hrefID,photoName){
var _file = document.getElementById(textID);
if(_file.files)
{
_file.value = "";
}
else
{
if (typeof _file != "object")
{
return null;
}

var textID=document.getElementById(textID);
textID.value="";
var timestemp = new Date().getTime();
var src=document.getElementById("carPermitDefaultPath").value;
var thumb = $('img#'+imgID);
var litbox = $('a#'+hrefID);
thumb.attr('src',"/groupware/images/PdfSample.png");
thumb.attr('style', 'width:230px;height:240px;border:0px;vertical-align:middle;cursor:pointer;' ).hide().fadeIn('slow');
litbox.attr('href',"/groupware/images/PdfSample.png"+'?'+timestemp);
$('.pdfImg').remove();
litbox.show();
lightbox.refresh();

var photoName=document.getElementById(photoName);
photoName.value=null;
var imgFont= document.getElementById(imgFont);
imgFont.value = null;
}
$("#imgFile").val("");
$("#img1path").val("");
}
html:

<body onload="showImage('insUpdPermitPhoto','imgFont','pfont');>
<div style="margin-top:3px;margin-bottom:-8px">
<span class="sl-custom-file" style="">
<input type="text" id="img1path" placeholder="対応フォーマット：pdfのみ" readonly="true" class="input-height" style="width:260px;height:20px;"/>

<button class="btn btn-small" id="reference" type="button" style="margin-left:-2px;margin-top:-12px">
<span style="color:black;">参照</span>
</button>
<input type="file" id='insUpdPermitPhoto' class="fileTransIE10 ui-input-file" name="ufile" onChange="getValue(this,'img1path')" />

</span>

<a href="javascript:void(0)" onfocus="this.blur();" onClick="goClearPhoto('img1path','imgFont','pfont','photoName');" class="btn btn-small" style="margin-top:-15px;">
<span style="color:black;">削除</span>
</a>
</div>
后台用方法把图片复制到指定路径就可以了

③ 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相关的资料

热点内容
如何将数据转换成数字方法 浏览：592
描写方法有哪些各有什么作用 浏览：422
间接测量方法包括 浏览：986
燧石杂质解决方法 浏览：1000
如何毛孔变小最快最简单的方法 浏览：628
弯管计算方法 浏览：101
荨麻疹快速治疗方法是什么 浏览：101
手机去内存方法 浏览：63
小米note3音乐在哪里设置方法 浏览：85
柚子茶制作方法图片 浏览：822
心理学与治疗的研究方法 浏览：689
学生在校时间的计算方法 浏览：534
大数字相加的简便运算方法 浏览：987
研究学霸学习的方法 浏览：649
写出常用的煮浆方法及特点 浏览：186
如何学初三英语最有效的方法 浏览：496
快速简单安全的减肥方法 浏览：933
常用硫酸制备方法 浏览：817
非淋性前列腺炎的治疗方法 浏览：680
过滤烟嘴使用方法 浏览：553