asp.net+jquery上传图片插件及图片上传格式像素限制

今天分享一下怎么对上传文件类型进行过滤,以及对图片像素的判断处理。

1、在html中实现对文件类型的过滤

所有上传插件都是基于iframe+file input控件实现,除了flash和siverlight的控件方式的。

file input的时候是支持对文件类型进行过滤的。过滤类型是:

<input type="file" accept="application/msword" ><br><br>accept属性列表<br>
1.accept="application/msexcel"
2.accept="application/msword"
3.accept="application/pdf"
4.accept="application/poscript"
5.accept="application/rtf"
6.accept="application/x-zip-compressed"
7.accept="audio/basic"
8.accept="audio/x-aiff"
9.accept="audio/x-mpeg"
10.accept="audio/x-pn/realaudio"
11.accept="audio/x-waw"
12.accept="image/gif"
13.accept="image/jpeg"
14.accept="image/tiff"
15.accept="image/x-ms-bmp"
16.accept="image/x-photo-cd"
17.accept="image/x-png"
18.accept="image/x-portablebitmap"
19.accept="image/x-portable-greymap"
20.accept="image/x-portable-pixmap"
21.accept="image/x-rgb"
22.accept="text/html"
23.accept="text/plain"
24.accept="video/quicktime"
25.accept="video/x-mpeg2"
26.accept="video/x-msvideo"
这个就可以实现选择具体的数据类型,但是有兼容问题,我在测试的时候只有Opera,Chrome能用,火狐和IE都不兼容
好吧,就在这里测试一下吧:
我只想要word
在这里如果想支持多种类型的话,比如金山的office和microsoft的office的不同扩展名,这样的话可以在accept里面放置多个属性就可以了:
<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /></form>
如果不限制图像的格式,可以写为:accept="image/*"。同样是可以的
好的,测试一下:
我只想要gif、bmp
好吧,只要是图片我就要了
嗯,测试成功,用Opera,Chrome能用,因为accept也是html5的新特性,所以火狐和IE的支持就显得单薄了,这样还是让我们等待他们的接受把
测试了好久,发现gif和bmp一起的时候并不是能取得他们的并集,仔细观察以后是按写入顺序排列了一下他们的“文件选择类型”:
就像是下面的图片一样:
IT分享
我们如果不定义input file的格式的时候,那么文件类型的地方就是全部文件*.*,如果我们定义了自己的,那么文件类型就会和我们选中的一样,但是这时候我们如果想看别的文件的时候还是可以通过文件类型的下拉框,去选择自己额外喜欢的类型的,简单的说,它就是起到了一个简单的按照我们的主观意愿筛选的作用,同时我们如果不是选择的image/*而是好几个并列的话就会按照上面的情况分别得排列出来,比如图上的我input就是这个样子的:
<form> <input type="file" name="pic" id="pic" accept="image/gif, image/x-ms-bmp, image/bmp" /></form>
2、C#中对图片进行大小验证和像素判断

 代码如下 复制代码

 public static bool CheckFileTypeLimit(string type,string filepath)
        {
            bool isok = false;
            if (File.Exists(filepath))
            {
                FileInfo fileinfo = new FileInfo(filepath);
                switch (type)
                {
                    case "image"://大小: 不超过1M,    格式: bmp, png, jpeg, jpg, gif
                        if (  fileinfo.Extension == ".JPG"
                                  || fileinfo.Extension == ".jpg"  
                            && fileinfo.Length / 1024 / 1024 < 1
                            )
                        {
                            isok = true;
                        }
                        break;
                    case "voice"://大小: 不超过5M, 长度:不超过60s, 格式: mp3, wma, wav, amr
                        if (( fileinfo.Extension == ".amr")
                         && fileinfo.Length / 1024/1024 < 2
                         )
                        {
                            isok = true;
                        }
                        break;
                    case "video"://大小: 不超过20M, 格式: rm, rmvb, wmv, avi, mpg, mpeg, mp4
                        if ((  fileinfo.Extension == ".mp4"
                      )
                       && fileinfo.Length / 1024 / 1024 < 10
                       )
                        {
                            isok = true;
                        }
                        break;
                    case "file"://大小: 不超过10M,    格式: txt, xml, pdf, zip, doc, ppt, xls, docx, pptx, xlsx
                        if ((fileinfo.Extension == ".txt"
                       || fileinfo.Extension == ".xml"
                             || fileinfo.Extension == ".pdf" || fileinfo.Extension == ".zip" || fileinfo.Extension == ".doc"
                             || fileinfo.Extension == ".ppt" || fileinfo.Extension == ".docx" || fileinfo.Extension == ".pptx"
                                          || fileinfo.Extension == ".xlsx"
                             || fileinfo.Extension == ".xls")
                       && fileinfo.Length / 1024 / 1024 < 10
                       )
                        {
                            isok = true;
                        }
                        break;
                    default:
                        break;
                }
            }
            return isok;
        }

像素判断:

 代码如下 复制代码

string s = @"C:\Users\nonocast.DEV.000\Desktop\bird.jpg";
var sh = new Shell32.ShellClass();
Shell32.Folder folder = sh.NameSpace(Path.GetDirectoryName(s));
Shell32.FolderItem item = folder.ParseName(@"bird.jpg");
var sizestr = folder.GetDetailsOf(item, 31);
Regex r = new Regex(@"(\d+)[^\d]+(\d+)");
if(r.IsMatch(sizestr)){
    var m = r.Match(sizestr);
    Console.WriteLine(Convert.ToInt32(m.Groups[1].Value));
    Console.WriteLine(Convert.ToInt32(m.Groups[2].Value));
}

时间: 2024-09-17 03:54:01

asp.net+jquery上传图片插件及图片上传格式像素限制的相关文章

使用jquery.form.js实现图片上传的方法_jquery

本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

PHP+jQuery+Ajax实现多图片上传效果_jquery

今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

ueditor-Ueditor图片上传格式和载入内容出现多余标签的问题(见详细)

问题描述 Ueditor图片上传格式和载入内容出现多余标签的问题(见详细) 由于无法上传图片, 详情请见链接-->百度http://zhidao.baidu.com/question/872896880101711852.html?quesup2&oldq=1

在php中使用jquery uploadify进行多图片上传

  jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadify插件的批量上传图片功能. 本文是以dilicms为基础,为其增加图片上传功能. 1.增加数据表dili_fieldtypes新字段:k=>image,V=>图片上传区域(VACHAR); 2.修改application/libraries/dili/Field_behavior.php,在

JQuery fileupload插件实现文件上传功能_jquery

道理相通,我简单分享下在.net MVC下的实装. 1.制作Model类 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace RCRS.WebApp.LG.EM.Models { //---------------------------------------------------------------- /// <summary> /// Impor

Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现_实用技巧

兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的.如果看到回显.当然就是成功了. 经历了好几天的不停的钻牛角尖,终于将这个二货弄出来了.真是煞费苦心啊.但是做出来的瞬间还是蛮开心的. 第一步:我们需要加载几个JS库.jquery库.jquery.form.js库. 下载这两个库,并引用到页面中. 以下为页面中 JS 代码: 复制代码 代码如下:   function upload() {            var options = {                type: "PO

jQuery插件uploadify实现ajax效果的图片上传_jquery

昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check

php-PHP + JQUERY 图片上传问题

问题描述 PHP + JQUERY 图片上传问题 要求:只要点击上传按钮就可以将这张图片显示到指定位置,并且能将图片从到指定目录,用php做的处理 币有点少,大家帮帮忙吧 解决方案 客户端可以i直接显示图片,用滤镜或者html5的FileReader对象.javascript客户端图片预览 上传看这个:http://www.w3school.com.cn/php/php_file_upload.asp 解决方案二: 1.图片上传可以使用jquery.form.js.单按钮上传,可以先隐藏一个fi

jQuery+HTML5实现图片上传前预览效果_jquery

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c