关于上传图片的问题

Question

请教大家一下：
      做网站的时候有一个板块要上传图片，一般用<input type="file" name="file">标签，但是它弹出来的选择图片的那个框 ，是默认选择所有文件，也就是说所有文件都能上传，我想对它进行限制，使之只能选择图片（就像人人网或QQ上传照片那样）。

      我知道一种，用jsp smartupload上传，但是这种处理方式是要提交到服务器再验证返回结果的，能不能像校内那样，一点技能选择的就只有图片呢？

 

 

Answer 1

[quote]
以下为引用的内容：

(function($){
/*

• @author denisdeng [e-mail]
• blog www.denisdeng.com
• $Version: 2009.8.11 1.0
• param reg[String] the format of image;
• param defImg[String] the default image;
• param btnText[String] the text of button;
• param error[String] the error;
• param imgText[String] the text when image do not show normaly; */

$.fn.liveFakeFile = function(o){
var settings = {
reg:"png|jpe?g|gif|bmp",
defImg:'img/defImage.gif',
btnText:'浏览图片',
blankImg: "img/blank.gif",
error: '对不起,照片格式不正确,请重新选择',
imgText:'你已经选择文件'
};
var ie7 = $.browser.msie&&($.browser.version == "7.0");
var ie8 = $.browser.msie&&($.browser.version == "8.0");
var moz = $.browser.mozilla;
return this.each(function(i,v){
if(o) settings = $.extend(settings, o);
var wrap = $('

');
var mes = $('

');
var button = $('');
var parent = $(this).parent('.fileinputs');
var imgWrap = $('

');
var defImg = $('');
imgWrap.append(defImg);
button.append(settings.btnText);
wrap.append(button);
wrap.append(mes);
imgWrap.insertBefore($(this));

$(this).attr("id",'file_'+i).appendTo(wrap);
parent.append(wrap);
$(this).bind('change',function(){
var val = $(this).val();
var imgName = val.slice(val.lastIndexOf("\")+1);
if(val.match(new RegExp(".(" + settings.reg + ")$", "i"))){
mes.empty();
//针对不能正常显示图片的浏览器
var img = $('') .append(settings. imgText).append(imgName);
//针对IE7或IE8浏览器
if(ie7 || ie8){
var img = $('');
}
//针对火狐浏览器
if(moz){
var obj = document.getElementById('file_'+i);
var img = $('');
}
imgWrap.empty().append(img);
}else{
imgWrap.empty().append(defImg);
mes.html(settings.error);
}
});
})
}
})(jQuery)

[/quote]
现在jquery中有个jquery.liveFakeFile插件，可以。
其实原理也很明显，重写文件浏览对话框，限制显示的文件格式。